updated deps

.gitignore

@@ -7,9 +7,6 @@ yarn-error.log*
 .DS_Store
 play*
 !playground*
-dist/*
-esm
-dist
 baby-i-am-faded/public
 
 # Runtime data
@@ -82,4 +79,5 @@ typings/
 # FuseBox cache
 .fusebox/
 
-.now
+.now
+/.idea/

landing-blocks/dist/Banner.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { PageContainerProps } from './layout';
+export declare type BannerProps = {
+    heading?: ReactNode;
+    subheading?: ReactNode;
+    bullet?: ReactNode;
+    image?: ReactNode;
+    cta?: ReactNode;
+    flip?: boolean;
+    fingerprint?: ReactNode;
+    animate?: any;
+} & PageContainerProps;
+export declare function Banner({ heading, subheading, bullet, cta, image, flip, fingerprint, animate, ...props }: BannerProps): JSX.Element;
+//# sourceMappingURL=Banner.d.ts.map

landing-blocks/dist/Banner.js

@@ -0,0 +1,60 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Banner = void 0;
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var Bullet_1 = require("./Bullet");
+var Heading_1 = require("./Heading");
+var hooks_1 = require("./hooks");
+var layout_1 = require("./layout");
+var Subheading_1 = require("./Subheading");
+var support_1 = require("./support");
+function Banner(_a) {
+    var _b = _a.heading, heading = _b === void 0 ? '' : _b, _c = _a.subheading, subheading = _c === void 0 ? '' : _c, _d = _a.bullet, bullet = _d === void 0 ? '' : _d, _e = _a.cta, cta = _e === void 0 ? '' : _e, _f = _a.image, image = _f === void 0 ? null : _f, _g = _a.flip, flip = _g === void 0 ? false : _g, _h = _a.fingerprint, fingerprint = _h === void 0 ? '' : _h, _j = _a.animate, animate = _j === void 0 ? undefined : _j, props = __rest(_a, ["heading", "subheading", "bullet", "cta", "image", "flip", "fingerprint", "animate"]);
+    var _k = (0, support_1.getPageContainerProps)(props), spacing = _k[0], rest = _k[1];
+    var direction = flip ? 'row-reverse' : 'row';
+    var Faded = (0, hooks_1.useFaded)({ animate: animate }).Faded;
+    return (react_2.default.createElement(layout_1.PageContainer, __assign({}, spacing),
+        react_2.default.createElement(react_1.Stack, __assign({ as: Faded, align: 'center', spacing: '40px', bg: 'gray.100', 
+            // isReversed={flip}
+            direction: ['column', null, direction], w: '100%', borderRadius: '10px', p: '30px' }, rest),
+            image && flip && react_2.default.createElement(react_1.Box, { flex: '1' }),
+            react_2.default.createElement(react_1.Stack, { spacing: '20px', minW: '300px', w: image ? 'auto' : '100%', justify: 'space-between', align: 'stretch', direction: ['column', null, image ? 'column' : 'row'] },
+                react_2.default.createElement(react_1.Stack, { spacing: '20px' },
+                    bullet && react_2.default.createElement(Bullet_1.Bullet, { my: '10px' }, bullet),
+                    react_2.default.createElement(Heading_1.Heading, { lineHeight: '50px', fontWeight: 'medium', fontSize: 'heading' }, heading),
+                    react_2.default.createElement(Subheading_1.Subheading, { lineHeight: '34px', opacity: 0.6, maxW: '600px', fontWeight: 'normal', fontSize: 'text' }, subheading)),
+                react_2.default.createElement(react_1.Stack, { spacing: '10px', w: 'auto', justify: 'center' },
+                    react_2.default.createElement(react_1.Box, null, cta),
+                    fingerprint && (react_2.default.createElement(react_1.Box, { opacity: 0.4, fontSize: 'subtext', lineHeight: '26px' }, fingerprint)))),
+            image && !flip && react_2.default.createElement(react_1.Box, { flex: '1' }),
+            image && (react_2.default.createElement(layout_1.Col, { align: 'center', 
+                // flex='1'
+                minW: '300px', minH: '100%' }, image)))));
+}
+exports.Banner = Banner;

landing-blocks/dist/Bullet.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BoxProps } from '@chakra-ui/react';
+export declare type BulletProps = BoxProps;
+export declare const Bullet: (props: any) => JSX.Element;
+//# sourceMappingURL=Bullet.d.ts.map

landing-blocks/dist/Bullet.js

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bullet = void 0;
+var react_1 = require("@chakra-ui/react");
+var color_js_1 = __importDefault(require("color-js"));
+var react_2 = __importStar(require("react"));
+var Bullet = function (props) {
+    var colorMode = (0, react_1.useColorMode)().colorMode;
+    if (!props.children) {
+        return react_2.default.createElement(react_2.Fragment, null);
+    }
+    return (react_2.default.createElement(react_1.Box, __assign({ w: 'fit-content', py: '2px', px: '6px', bg: {
+            light: (0, color_js_1.default)('black').setAlpha(0.1).toCSS(),
+            dark: (0, color_js_1.default)('white').setAlpha(0.2).toCSS(),
+        }[colorMode], fontWeight: 'medium', fontSize: 'subtext', borderRadius: '4px', isTruncated: true }, props)));
+};
+exports.Bullet = Bullet;

landing-blocks/dist/Button.d.ts

@@ -0,0 +1,13 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { ButtonProps as ButtonProps_ } from '@chakra-ui/react';
+import { FC } from 'react';
+export declare type ButtonProps = ButtonProps_ & {
+    href?: string;
+    biggerOnHover?: boolean;
+    animate?: boolean | keyof typeof myAnimations;
+};
+declare const myAnimations: any;
+export declare const Button: FC<ButtonProps>;
+export {};
+//# sourceMappingURL=Button.d.ts.map

landing-blocks/dist/Button.js

@@ -0,0 +1,82 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@chakra-ui/react");
+var react_2 = require("@emotion/react");
+var color_js_1 = __importDefault(require("color-js"));
+var react_3 = require("react");
+var bouncein_1 = __importDefault(require("./animations/bouncein"));
+var headshake_1 = __importDefault(require("./animations/headshake"));
+var shake_1 = __importDefault(require("./animations/shake"));
+var wobble_1 = __importDefault(require("./animations/wobble"));
+var support_1 = require("./support");
+var myAnimations = {
+    wobble: wobble_1.default,
+    bounceIn: bouncein_1.default,
+    headShake: headshake_1.default,
+    shake: shake_1.default,
+};
+exports.Button = (0, react_3.forwardRef)(function (_a, ref) {
+    var _b = _a.bg, bg = _b === void 0 ? 'primary' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.biggerOnHover, biggerOnHover = _d === void 0 ? false : _d, animate = _a.animate, props = __rest(_a, ["bg", "className", "biggerOnHover", "animate"]);
+    var realBg = (0, support_1.useColor)(bg);
+    var lightness = (0, color_js_1.default)(realBg).getLightness();
+    var isDark = lightness < 0.7;
+    var color = isDark ? 'white' : 'black';
+    if (!props.children) {
+        return (0, react_2.jsx)(react_3.Fragment, null);
+    }
+    var animationCss = (0, react_3.useMemo)(function () {
+        if (animate === true) {
+            return makeAnimationCss(bouncein_1.default);
+        }
+        if (animate && animate in myAnimations) {
+            return makeAnimationCss(myAnimations[animate]);
+        }
+        return (0, react_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+    }, [animate]);
+    var biggerOnHoverStyle = (0, react_3.useMemo)(function () {
+        return makeBiggerOnHoverStyle(realBg);
+    }, [realBg]);
+    return ((0, react_2.jsx)(react_1.Button, __assign({ css: [biggerOnHover ? biggerOnHoverStyle : {}, animationCss], ref: ref, as: props.href ? 'a' : 'button', 
+        // transition='all 0.1s ease-in-out'
+        px: '20px', className: className, d: 'block', width: 'auto', color: color, bg: bg, fontSize: 'text', fontWeight: 'medium' }, props)));
+});
+var makeBiggerOnHoverStyle = function (bg) {
+    var highlight = (0, color_js_1.default)(bg).setAlpha(0.2).toHSL().toString();
+    return (0, react_2.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        & {\n            box-shadow: 0 0 0 0 ", ";\n            animation: landingBlocksPulseAnimation 1.75s infinite\n                cubic-bezier(0.66, 0, 0, 1);\n        }\n\n        @keyframes landingBlocksPulseAnimation {\n            to {\n                box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);\n            }\n        }\n\n        & {\n            transition: transform 0.15s;\n            cursor: pointer;\n            position: relative;\n            z-index: 1;\n        }\n\n        &::after {\n            content: '';\n            background-color: ", ";\n            transition: transform 0.15s;\n            border-radius: 7px;\n            position: absolute;\n            inset: 0;\n            z-index: -1;\n        }\n\n        &:hover::after {\n            transform: scale(1.06);\n        }\n    "], ["\n        & {\n            box-shadow: 0 0 0 0 ", ";\n            animation: landingBlocksPulseAnimation 1.75s infinite\n                cubic-bezier(0.66, 0, 0, 1);\n        }\n\n        @keyframes landingBlocksPulseAnimation {\n            to {\n                box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);\n            }\n        }\n\n        & {\n            transition: transform 0.15s;\n            cursor: pointer;\n            position: relative;\n            z-index: 1;\n        }\n\n        &::after {\n            content: '';\n            background-color: ", ";\n            transition: transform 0.15s;\n            border-radius: 7px;\n            position: absolute;\n            inset: 0;\n            z-index: -1;\n        }\n\n        &:hover::after {\n            transform: scale(1.06);\n        }\n    "])), highlight, bg);
+};
+function makeAnimationCss(keyframes) {
+    return (0, react_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        animation-duration: 0.6s;\n        /* animation-delay: 1s; */\n        animation-timing-function: ease-in-out;\n        animation-name: ", ";\n        animation-direction: normal;\n        /* animation-iteration-count: infinite; */\n    "], ["\n        animation-duration: 0.6s;\n        /* animation-delay: 1s; */\n        animation-timing-function: ease-in-out;\n        animation-name: ", ";\n        animation-direction: normal;\n        /* animation-iteration-count: infinite; */\n    "])), keyframes);
+}
+var templateObject_1, templateObject_2, templateObject_3;

landing-blocks/dist/CodeSnippet.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { StackProps } from '@chakra-ui/react';
+import { Language, PrismTheme } from 'prism-react-renderer';
+export declare type CodeSnippetProps = {
+    language: Language;
+    code: string;
+    isTyping?: boolean;
+    dark?: boolean;
+    theme?: PrismTheme;
+    lineNumbers?: boolean;
+} & StackProps;
+export declare const CodeSnippet: ({ code, language, isTyping, lineNumbers, theme, dark, ...rest }: CodeSnippetProps) => JSX.Element;
+//# sourceMappingURL=CodeSnippet.d.ts.map