react-electronix 1.0.0

package/dist/cjs/components/Mac/components/Startup/Startup.style.d.ts

@@ -0,0 +1,25 @@
+export declare const useStyles: ({ animation }: StylesProps) => {
+    startup: {
+        position: string;
+        top: number;
+        left: number;
+        opacity: number;
+        width: string;
+        height: string;
+        background: string;
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        zIndex: number;
+        transition: string;
+    };
+    startupSvg: {
+        fill: string;
+        width: string;
+        height: string;
+    };
+};
+interface StylesProps {
+    animation?: boolean;
+}
+export {};

package/dist/cjs/components/Mac/components/Startup/Startup.style.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var useStyles = function (_a) {
+    var animation = _a.animation;
+    return ({
+        startup: {
+            position: 'absolute',
+            top: 0, left: 0,
+            opacity: animation ? 1 : 0,
+            width: '100%',
+            height: '100%',
+            background: 'black',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1,
+            transition: 'opacity 0.5s'
+        },
+        startupSvg: {
+            fill: 'white',
+            width: '10%',
+            height: 'auto'
+        }
+    });
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=Startup.style.js.map

package/dist/cjs/components/Mac/components/Startup/Startup.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Startup.style.js","sourceRoot":"","sources":["../../../../../../src/components/Mac/components/Startup/Startup.style.ts"],"names":[],"mappings":";;;AAAO,IAAM,SAAS,GAAG,UAAC,EAAwB;QAAvB,SAAS,eAAA;IAAmB,OAAA,CAAC;QACpD,OAAO,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC;YACf,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1B,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,OAAO;YACnB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,cAAc;SAC7B;QACD,UAAU,EAAE;YACR,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,MAAM;SACjB;KACJ,CAAC;AAnBqD,CAmBrD,CAAA;AAnBW,QAAA,SAAS,aAmBpB"}

package/dist/cjs/components/Mac/components/Startup/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Startup';
+export * from './Startup.props';
+export * from './Startup.style';

package/dist/cjs/components/Mac/components/Startup/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Startup"), exports);
+tslib_1.__exportStar(require("./Startup.props"), exports);
+tslib_1.__exportStar(require("./Startup.style"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Mac/components/Startup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/Mac/components/Startup/index.ts"],"names":[],"mappings":";;;AAAA,oDAA0B;AAC1B,0DAA+B;AAC/B,0DAA+B"}

package/dist/cjs/components/Mac/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Mac';
+export * from './Mac.props';
+export * from './Mac.styles';

package/dist/cjs/components/Mac/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Mac"), exports);
+tslib_1.__exportStar(require("./Mac.props"), exports);
+tslib_1.__exportStar(require("./Mac.styles"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Mac/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Mac/index.ts"],"names":[],"mappings":";;;AAAA,gDAAqB;AACrB,sDAA4B;AAC5B,uDAA4B"}

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

@@ -0,0 +1,2 @@
+export * from './Mac';
+export * from './Iphone';

package/dist/cjs/components/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Mac"), exports);
+tslib_1.__exportStar(require("./Iphone"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,gDAAqB;AACrB,mDAAwB"}

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/cjs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./components"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B"}

package/dist/esm/components/Iphone/Iphone.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IphoneProps } from '.';
+export declare const Iphone: ({ width, children }: IphoneProps) => JSX.Element;

package/dist/esm/components/Iphone/Iphone.js

@@ -0,0 +1,22 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { useStyles } from './Iphone.style';
+export var Iphone = function (_a) {
+    var width = _a.width, children = _a.children;
+    var style = useStyles({ width: width });
+    // const [time, setTime] = useState(new Date())
+    // useEffect(() => {
+    //     setInterval(() => setTime(new Date()), 1000)
+    // }, [])
+    return (React.createElement(Box, { sx: style.iphone },
+        React.createElement(Box, { sx: style.buttons },
+            React.createElement(Box, { sx: style.silencer }),
+            React.createElement(Box, { sx: style.volumeUp }),
+            React.createElement(Box, { sx: style.volumeDown })),
+        React.createElement(Box, { sx: style.powerButton }),
+        React.createElement(Box, { sx: style.display },
+            React.createElement(Box, { sx: style.floatinIsland },
+                React.createElement(Box, { sx: style.camera })),
+            React.createElement(Box, { sx: style.children }, children))));
+};
+//# sourceMappingURL=Iphone.js.map

package/dist/esm/components/Iphone/Iphone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Iphone.js","sourceRoot":"","sources":["../../../../src/components/Iphone/Iphone.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,CAAC,IAAM,MAAM,GAAG,UAAC,EAGT;QAFV,KAAK,WAAA,EACL,QAAQ,cAAA;IAER,IAAM,KAAK,GAAG,SAAS,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,CAAA;IAClC,+CAA+C;IAE/C,oBAAoB;IACpB,mDAAmD;IACnD,SAAS;IAET,OAAO,CACH,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM;QACjB,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,GAAQ;YAC/B,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,GAAQ;YAC/B,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,UAAU,GAAQ,CAC/B;QACN,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,WAAW,GAAQ;QAClC,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,aAAa;gBACxB,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM,GAAQ,CAC3B;YACN,oBAAC,GAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,IASlB,QAAQ,CACP,CACJ,CACJ,CACT,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/components/Iphone/Iphone.props.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface IphoneProps {
+    width: number;
+    children: ReactNode;
+}

package/dist/esm/components/Iphone/Iphone.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Iphone.props.js.map

package/dist/esm/components/Iphone/Iphone.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Iphone.props.js","sourceRoot":"","sources":["../../../../src/components/Iphone/Iphone.props.ts"],"names":[],"mappings":""}

package/dist/esm/components/Iphone/Iphone.style.d.ts

@@ -0,0 +1,98 @@
+export declare const useStyles: ({ width }: StyleProps) => {
+    iphone: {
+        width: number;
+        height: number;
+        position: string;
+        borderRadius: string;
+        zIndex: string;
+    };
+    display: {
+        borderRadius: string;
+        boxShadow: string;
+        width: string;
+        height: string;
+        background: string;
+        zIndex: string;
+        overflow: string;
+    };
+    children: {
+        width: string;
+        height: string;
+        overflow: string;
+        borderRadius: string;
+        margin: string;
+    };
+    floatinIsland: {
+        width: string;
+        height: string;
+        background: string;
+        borderRadius: string;
+        position: string;
+        top: string;
+        left: string;
+        transform: string;
+        zIndex: string;
+    };
+    camera: {
+        width: string;
+        height: string;
+    };
+    buttons: {
+        width: string;
+        position: string;
+        top: string;
+        left: string;
+    };
+    silencer: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        border: string;
+        borderRight: string;
+        backgroundImage: string;
+        boxShadow: string;
+    };
+    volumeUp: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        border: string;
+        borderRight: string;
+        backgroundImage: string;
+        boxShadow: string;
+        position: string;
+        top: string;
+    };
+    volumeDown: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        border: string;
+        borderRight: string;
+        backgroundImage: string;
+        boxShadow: string;
+        position: string;
+        top: string;
+    };
+    powerButton: {
+        width: string;
+        height: string;
+        position: string;
+        top: string;
+        right: string;
+        borderRadius: string;
+        border: string;
+        borderRight: string;
+        backgroundImage: string;
+        boxShadow: string;
+    };
+    statusBar: {
+        backgroundColor: string;
+    };
+    timeContainer: {};
+    iconContainer: {};
+};
+interface StyleProps {
+    width: number;
+}
+export {};

package/dist/esm/components/Iphone/Iphone.style.js

@@ -0,0 +1,98 @@
+export var useStyles = function (_a) {
+    var width = _a.width;
+    return ({
+        iphone: {
+            width: width,
+            height: width * 2.07,
+            position: 'relative',
+            borderRadius: "".concat(width / 5.8, "px"),
+            zIndex: '1'
+        },
+        display: {
+            borderRadius: "".concat(width / 5.8, "px"),
+            boxShadow: "inset 0 0 0 ".concat(width * 0.001, "px #8C826A, inset 0 0 0 ").concat(width * 0.002, "px #2C250C, inset 0 0 0 ").concat(width * 0.003, "px #77725B, inset 0 0 0 ").concat(width * 0.004, "px #E1D8C4, inset 0 0 0 ").concat(width * 0.006, "px #FFFBE7, inset 0 0 0 ").concat(width * 0.007, "px #E4DBC1, inset 0 0 0 ").concat(width * 0.008, "px #B5A586, inset 0 0 0 ").concat(width * 0.009, "px #A3906D, inset 0 0 0 ").concat(width * 0.010, "px #907F5E, inset 0 0 0 ").concat(width * 0.012, "px #928769, inset 0 0 0 ").concat(width * 0.013, "px #383624, inset 0 0 0 ").concat(width * 0.014, "px #404037, inset 0 0 0 ").concat(width * 0.015, "px #101109, inset 0 0 0 ").concat(width * 0.04, "px black"),
+            width: '100%',
+            height: '100%',
+            background: 'rgb(10, 10, 10)',
+            zIndex: '-1',
+            overflow: 'hidden'
+        },
+        children: {
+            width: "".concat(width * 0.917, "px"),
+            height: "".concat(width * 1.989, "px"),
+            overflow: 'scroll',
+            borderRadius: "".concat(width / 7.5, "px"),
+            margin: "".concat(width * 0.0415, "px auto"),
+        },
+        floatinIsland: {
+            width: "".concat(width * 0.267, "px"),
+            height: "".concat(width * 0.078, "px"),
+            background: 'black',
+            borderRadius: "".concat(width * 0.040, "px"),
+            position: 'absolute',
+            top: "".concat(width * 0.064, "px"),
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: '1'
+        },
+        camera: {
+            width: "".concat(width * 0.022, "px"),
+            height: "".concat(width * 0.022, "px")
+        },
+        buttons: {
+            width: "".concat(width * 0.0050, "px"),
+            position: 'absolute',
+            top: "".concat(width * 0.364, "px"),
+            left: "-".concat(width * 0.0050, "px"),
+        },
+        silencer: {
+            width: '100%',
+            height: "".concat(width * 0.0729, "px"),
+            borderRadius: "".concat(width * 0.002, "px 0 0 ").concat(width * 0.002, "px"),
+            border: "".concat(width * 0.001, "px solid #9D947A"),
+            borderRight: 'none',
+            backgroundImage: 'linear-gradient(to bottom, #AEA289 0%, #FFFCE0 2%, #5D5032 4%, #E6D5B4 10%, #E6D5B4 90%, #5D5032 94%, #FFFCE0 98%, #AEA289 100%)',
+            boxShadow: "inset ".concat(width * 0.001, "px 0 0 #E5D6B4")
+        },
+        volumeUp: {
+            width: '100%',
+            height: "".concat(width * 0.144, "px"),
+            borderRadius: "".concat(width * 0.002, "px 0 0 ").concat(width * 0.002, "px"),
+            border: "".concat(width * 0.001, "px solid #9D947A"),
+            borderRight: 'none',
+            backgroundImage: 'linear-gradient(to bottom, #AEA289 0%, #FFFCE0 2%, #5D5032 4%, #E6D5B4 10%, #E6D5B4 90%, #5D5032 94%, #FFFCE0 98%, #AEA289 100%)',
+            boxShadow: "inset ".concat(width * 0.001, "px 0 0 #E5D6B4"),
+            position: 'absolute',
+            top: "".concat(width * 0.137, "px")
+        },
+        volumeDown: {
+            width: '100%',
+            height: "".concat(width * 0.144, "px"),
+            borderRadius: "".concat(width * 0.002, "px 0 0 ").concat(width * 0.002, "px"),
+            border: "".concat(width * 0.001, "px solid #9D947A"),
+            borderRight: 'none',
+            backgroundImage: 'linear-gradient(to bottom, #AEA289 0%, #FFFCE0 2%, #5D5032 4%, #E6D5B4 10%, #E6D5B4 90%, #5D5032 94%, #FFFCE0 98%, #AEA289 100%)',
+            boxShadow: "inset ".concat(width * 0.001, "px 0 0 #E5D6B4"),
+            position: 'absolute',
+            top: "".concat(width * 0.316, "px")
+        },
+        powerButton: {
+            width: "".concat(width * 0.0050, "px"),
+            height: "".concat(width * 0.225, "px"),
+            position: 'absolute',
+            top: "".concat(width * 0.605, "px"),
+            right: "-".concat(width * 0.0050, "px"),
+            borderRadius: "".concat(width * 0.002, "px ").concat(width * 0.002, "px 0 0"),
+            border: "".concat(width * 0.001, "px solid #9D947A"),
+            borderRight: 'none',
+            backgroundImage: 'linear-gradient(to bottom, #AEA289 0%, #FFFCE0 2%, #5D5032 4%, #E6D5B4 10%, #E6D5B4 90%, #5D5032 94%, #FFFCE0 98%, #AEA289 100%)',
+            boxShadow: "inset -".concat(width * 0.001, "px 0 0 #E5D6B4"),
+        },
+        statusBar: {
+            backgroundColor: 'white'
+        },
+        timeContainer: {},
+        iconContainer: {}
+    });
+};
+//# sourceMappingURL=Iphone.style.js.map

package/dist/esm/components/Iphone/Iphone.style.js.map

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

package/dist/esm/components/Iphone/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Iphone';
+export * from './Iphone.props';

package/dist/esm/components/Iphone/index.js

@@ -0,0 +1,3 @@
+export * from './Iphone';
+export * from './Iphone.props';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Iphone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Iphone/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA"}

package/dist/esm/components/Mac/Mac.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { MacProps } from '.';
+export declare const Mac: ({ startup, animateOpen, open, width, openAngle, children }: MacProps) => JSX.Element;

package/dist/esm/components/Mac/Mac.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import { useStyles } from '.';
+import { Startup } from './components/Startup';
+export var Mac = function (_a) {
+    var startup = _a.startup, animateOpen = _a.animateOpen, open = _a.open, width = _a.width, openAngle = _a.openAngle, children = _a.children;
+    var _b = useState(animateOpen ? false : open), macOpen = _b[0], setMacOpen = _b[1];
+    var styles = useStyles({ width: width, macOpen: macOpen, openAngle: openAngle });
+    useEffect(function () {
+        if (animateOpen) {
+            setTimeout(function () { return setMacOpen(open); }, 100);
+        }
+        else {
+            setMacOpen(open);
+        }
+    }, [open, animateOpen]);
+    return (React.createElement("div", { style: styles.mac },
+        React.createElement("div", { className: 'top-portion', style: styles.topPortion },
+            React.createElement("div", { className: 'lid', style: styles.lid }),
+            React.createElement("div", { className: 'top', style: styles.top },
+                React.createElement("div", { className: 'screen', style: styles.screen },
+                    React.createElement("div", { className: "camera", style: styles.camera }),
+                    React.createElement(Startup, { show: startup }),
+                    React.createElement("div", { style: styles.screenContent }, children)),
+                React.createElement("div", { className: 'engraving', style: styles.engraving }, "Macbook Pro"),
+                React.createElement("div", { className: 'after-screen', style: styles.afterScreen }))),
+        React.createElement("div", { className: 'bottom-portion', style: styles.bottomPortion },
+            React.createElement("div", { className: 'bottom-cover', style: styles.bottomCover }),
+            React.createElement("div", { className: 'bottom', style: styles.bottom },
+                React.createElement("div", { className: "opener", style: styles.opener }),
+                React.createElement("div", { className: "bottom-after", style: styles.bottomAfter })))));
+};
+//# sourceMappingURL=Mac.js.map

package/dist/esm/components/Mac/Mac.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mac.js","sourceRoot":"","sources":["../../../../src/components/Mac/Mac.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAY,SAAS,EAAE,MAAM,GAAG,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,MAAM,CAAC,IAAM,GAAG,GAAG,UAAC,EAOT;QANP,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,SAAS,eAAA,EACT,QAAQ,cAAA;IAEF,IAAA,KAAwB,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAA3D,OAAO,QAAA,EAAE,UAAU,QAAwC,CAAA;IAClE,IAAM,MAAM,GAAG,SAAS,CAAC,EAAE,KAAK,OAAA,EAAE,OAAO,SAAA,EAAE,SAAS,WAAA,EAAE,CAAC,CAAA;IAEvD,SAAS,CAAC;QACN,IAAI,WAAW,EAAE;YACb,UAAU,CAAC,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EAAE,GAAG,CAAC,CAAA;SAC1C;aAAM;YACH,UAAU,CAAC,IAAI,CAAC,CAAA;SACnB;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IACvB,OAAO,CACH,6BAAK,KAAK,EAAE,MAAM,CAAC,GAAG;QAClB,6BAAK,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,MAAM,CAAC,UAAU;YACjD,6BAAK,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,GAAG,GAAQ;YAC9C,6BAAK,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,GAAG;gBAClC,6BAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM;oBACxC,6BAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAQ;oBACpD,oBAAC,OAAO,IAAC,IAAI,EAAE,OAAO,GAAI;oBAC1B,6BAAK,KAAK,EAAE,MAAM,CAAC,aAAa,IAC3B,QAAQ,CACP,CACJ;gBACN,6BAAK,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,MAAM,CAAC,SAAS,kBAAmB;gBACrE,6BAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,GAAQ,CAC7D,CACJ;QACN,6BAAK,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,MAAM,CAAC,aAAa;YACvD,6BAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,GAAQ;YAC/D,6BAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM;gBACxC,6BAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAQ;gBACpD,6BAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,GAAQ,CAC7D,CACJ,CACJ,CACT,CAAA;AACL,CAAC,CAAA"}

package/dist/esm/components/Mac/Mac.props.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface MacProps {
+    open: boolean;
+    width: number;
+    startup?: boolean;
+    animateOpen?: boolean;
+    openAngle?: number;
+    children?: ReactNode;
+}

package/dist/esm/components/Mac/Mac.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Mac.props.js.map

package/dist/esm/components/Mac/Mac.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mac.props.js","sourceRoot":"","sources":["../../../../src/components/Mac/Mac.props.ts"],"names":[],"mappings":""}

package/dist/esm/components/Mac/Mac.styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const useStyles: ({ width, macOpen, openAngle }: StylesProps) => Styles;
+interface StylesProps {
+    width: number;
+    macOpen: boolean;
+    openAngle?: number;
+}
+interface Styles {
+    [key: string]: React.CSSProperties;
+}
+export {};

package/dist/esm/components/Mac/Mac.styles.js

@@ -0,0 +1,153 @@
+export var useStyles = function (_a) {
+    var width = _a.width, macOpen = _a.macOpen, openAngle = _a.openAngle;
+    return ({
+        mac: {
+            width: width,
+            height: width * 0.683,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            perspective: '120vw',
+            perspectiveOrigin: '50% 100%',
+            transition: 'right 1s',
+            margin: '0 150px',
+        },
+        topPortion: {
+            transformStyle: 'preserve-3d',
+            transform: "rotateX(-".concat(macOpen ? openAngle !== null && openAngle !== void 0 ? openAngle : 0 : 90, "deg)"),
+            transformOrigin: '50% 100%',
+        },
+        lid: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: width,
+            height: width * 0.009,
+            transform: "translate3d(0, 0, -".concat(width * 0.009, "px ) rotateX(90deg) scale(1, 1)"),
+            transformOrigin: '50% 0',
+            backfaceVisibility: 'hidden',
+            borderTopRightRadius: "".concat(width / 8, "px ").concat(width * 0.0075, "px"),
+            borderTopLeftRadius: "".concat(width / 8, "px ").concat(width * 0.0075, "px"),
+            borderBottomRightRadius: 2,
+            borderBottomLeftRadius: 2,
+            borderBottom: '1px solid black',
+            boxSizing: 'border-box',
+            backgroundColor: 'rgba(92,92,92,1)',
+            background: 'linear-gradient(to right, rgba(92,92,92,1) 0%, rgba(200,200,200,1) 2%, rgba(105,105,105,1) 4%, rgba(200,200,200,1) 10%, rgba(200,200,200,1) 90%, rgba(112,112,112,1) 94%, rgba(200,200,200,1) 98%, rgba(112,112,112,1) 100%)',
+            filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c5c5c', endColorstr='#707070', GradientType=1 )"
+        },
+        top: {
+            width: width,
+            height: width * 0.683,
+            background: 'black',
+            borderRadius: "".concat(width / 22.8, "px ").concat(width / 22.8, "px 0 0"),
+            border: "".concat(width / 300, "px solid rgb(129, 129, 129)"),
+            borderBottom: 'none',
+            boxSizing: 'border-box',
+            position: 'relative',
+            overflow: 'hidden',
+            top: 1,
+        },
+        engraving: {
+            zIndex: 1,
+            color: 'rgb(178, 178, 178)',
+            fontSize: "".concat(width * 0.017075, "px"),
+            position: 'absolute',
+            top: "".concat((width * 0.683) - (width * 0.023222), "px"),
+            left: '50%',
+            transform: 'translateX(-50%)',
+            fontFamily: "'SF Pro Display', sans-serif"
+        },
+        screen: {
+            width: "".concat(width * 0.95, "px"),
+            height: "".concat(width * 0.59421, "px"),
+            background: 'rgb(13, 13, 13)',
+            margin: '0 auto',
+            marginTop: "".concat(width * 0.04997560976, "px"),
+            position: 'relative',
+            color: 'white'
+        },
+        camera: {
+            position: 'absolute',
+            width: width / 160,
+            height: width / 160,
+            borderRadius: '50%',
+            backgroundImage: 'linear-gradient(to bottom right, rgb(34, 33, 33), black)',
+            top: -(width * 0.683 * 0.073170731707317) / 2,
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            border: "".concat(width / 266.66, " solid rgb(20, 20, 20)"),
+        },
+        innerScreen: {
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: 0,
+            left: 0
+        },
+        screenContent: {
+            width: '100%',
+            height: '100%'
+        },
+        afterScreen: {
+            background: 'rgb(28, 28, 28)',
+            width: '100%',
+            height: "".concat(width * 0.023222, "px"),
+            position: 'absolute',
+            bottom: 0,
+            left: 0
+        },
+        bottomPortion: {
+            transform: 'rotateX(-90deg)',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            transformStyle: 'preserve-3d',
+            transformOrigin: '50% 100%',
+            display: 'inline-block',
+            transition: 'transform 0.5s'
+        },
+        bottomCover: {
+            width: width,
+            height: width * 0.683,
+            backfaceVisibility: 'hidden'
+        },
+        bottom: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            transform: 'rotateX(90deg)',
+            transformOrigin: '50% 0',
+            width: width,
+            borderRadius: '2px 2px 0 0',
+            height: width * 0.0249,
+            backgroundColor: 'rgba(92,92,92,1)',
+            background: 'linear-gradient(to right, rgba(92,92,92,1) 0%, rgba(200,200,200,1) 2%, rgba(105,105,105,1) 4%, rgba(200,200,200,1) 10%, rgba(200,200,200,1) 90%, rgba(112,112,112,1) 94%, rgba(200,200,200,1) 98%, rgba(112,112,112,1) 100%)',
+            filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c5c5c', endColorstr='#707070', GradientType=1 )"
+        },
+        opener: {
+            width: width * 0.15,
+            height: (width * 0.023905) * 0.5,
+            background: 'rgb(207, 207, 207)',
+            position: 'absolute',
+            top: 0,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            borderRadius: "0 0 ".concat(width * 0.02, "px ").concat(width * 0.02, "px"),
+            boxShadow: 'inset 0 3px 10px -2px black'
+        },
+        bottomAfter: {
+            width: '100%',
+            height: '80%',
+            background: 'rgb(113, 113, 113)',
+            position: 'absolute',
+            top: 'calc(100% - 1px)',
+            left: 0,
+            borderBottomRightRadius: "".concat(width * 0.25, "px 100%"),
+            borderBottomLeftRadius: "".concat(width * 0.25, "px 100%"),
+            boxShadow: 'inset 0 -5px 10px black, 0 5px 10px',
+        }
+    });
+};
+//# sourceMappingURL=Mac.styles.js.map

package/dist/esm/components/Mac/Mac.styles.js.map

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

package/dist/esm/components/Mac/components/Startup/Startup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { StartupProps } from '.';
+export declare const Startup: ({ show }: StartupProps) => JSX.Element;