react-electronix 1.0.10 → 2.0.0

package/dist/cjs/components/IMac/IMac.styles.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var IMAC_COLORS = {
+    blue: {
+        chin: '#a1c2d9',
+        stand: 'linear-gradient(180deg, #e1eef6 0%, #a1c2d9 50%, #89acca 100%)',
+        enclosure: '#f3f3f3',
+        base: '#89acca'
+    },
+    purple: {
+        chin: '#b9bad9',
+        stand: 'linear-gradient(180deg, #e8e8f3 0%, #b9bad9 50%, #a1a2c0 100%)',
+        enclosure: '#f3f3f3',
+        base: '#a1a2c0'
+    },
+    pink: {
+        chin: '#e7b9bc',
+        stand: 'linear-gradient(180deg, #f9e8e9 0%, #e7b9bc 50%, #cf9fa3 100%)',
+        enclosure: '#f3f3f3',
+        base: '#cf9fa3'
+    },
+    orange: {
+        chin: '#f1c2b0',
+        stand: 'linear-gradient(180deg, #fbeaea 0%, #f1c2b0 50%, #d9aa98 100%)',
+        enclosure: '#f3f3f3',
+        base: '#d9aa98'
+    },
+    yellow: {
+        chin: '#e8d9a1',
+        stand: 'linear-gradient(180deg, #f7f1d9 0%, #e8d9a1 50%, #d0c189 100%)',
+        enclosure: '#f3f3f3',
+        base: '#d0c189'
+    },
+    green: {
+        chin: '#acc1b4',
+        stand: 'linear-gradient(180deg, #e4ede8 0%, #acc1b4 50%, #94a99b 100%)',
+        enclosure: '#f3f3f3',
+        base: '#94a99b'
+    },
+    silver: {
+        chin: '#d4d7d8',
+        stand: 'linear-gradient(180deg, #e5e7eb 0%, #d1d5db 50%, #cacdce 100%)',
+        enclosure: '#e7e9ea',
+        base: '#9ca3af'
+    },
+};
+var useStyles = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 600 : _b, _c = _a.color, color = _c === void 0 ? 'silver' : _c;
+    var height = width * 0.6879377432; // Total height including chin
+    var screenWidth = width * 0.96;
+    var screenHeight = width * 0.54; // 16:9 aspect ratio for display area
+    var borderRadius = width * 0.02;
+    var standWidth = width * 0.2373540856;
+    var standHeight = width * 0.1556420233;
+    var theme = IMAC_COLORS[color];
+    return {
+        imac: {
+            width: width,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            position: 'relative',
+        },
+        mainBody: {
+            width: width,
+            height: height,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            position: 'relative',
+        },
+        enclosure: {
+            width: width,
+            height: width * 0.5875486381,
+            backgroundColor: theme.enclosure, // Front bezel color
+            borderRadius: "".concat(borderRadius, "px ").concat(borderRadius, "px 0 0"),
+            padding: "".concat(width * 0.02, "px"),
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            boxShadow: "0 ".concat(width * 0.02, "px ").concat(width * 0.04, "px rgba(0,0,0,0.1)"),
+            border: '1px solid rgba(0,0,0,0.05)',
+        },
+        displayArea: {
+            width: '100%',
+            height: screenHeight + (width * 0.03), // include top bezel area
+            backgroundColor: '#000',
+            position: 'relative',
+            overflow: 'hidden',
+        },
+        camera: {
+            width: width * 0.01,
+            height: width * 0.01,
+            backgroundColor: '#1a1a1a',
+            borderRadius: '50%',
+            position: 'absolute',
+            top: width * 0.005,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 10,
+        },
+        screenContent: {
+            width: screenWidth,
+            height: screenHeight,
+            backgroundColor: '#000',
+            position: 'relative',
+            overflow: 'hidden',
+            padding: 0
+        },
+        chin: {
+            width: '100%',
+            height: width * 0.1011673152,
+            flex: 1,
+            backgroundColor: theme.chin,
+            borderRadius: "0 0 ".concat(borderRadius * 0.8, "px ").concat(borderRadius * 0.8, "px"),
+        },
+        stand: {
+            width: standWidth,
+            height: standHeight,
+            background: theme.stand,
+            position: 'relative',
+            marginTop: "-".concat(width * 0.01, "px"), // Slight overlap with enclosure
+            zIndex: -1,
+            boxShadow: "0 ".concat(width * 0.01, "px ").concat(width * 0.02, "px rgba(0,0,0,0.1)"),
+        },
+        base: {
+            width: standWidth * 1.2,
+            height: width * 0.015,
+            backgroundColor: theme.base,
+            borderRadius: "".concat(width * 0.005, "px"),
+            marginTop: "-".concat(width * 0.005, "px"),
+            boxShadow: "0 ".concat(width * 0.01, "px ").concat(width * 0.02, "px rgba(0,0,0,0.2)"),
+        }
+    };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=IMac.styles.js.map

package/dist/cjs/components/IMac/IMac.styles.js.map

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

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

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

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

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

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

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

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IphoneProps } from '.';
-export declare const Iphone: ({ width, children }: IphoneProps) => React.JSX.Element;
+export declare const Iphone: ({ width, children, color }: IphoneProps) => React.JSX.Element;

package/dist/cjs/components/Iphone/Iphone.js

@@ -1,27 +1,27 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Iphone = void 0;
 var tslib_1 = require("tslib");
 var material_1 = require("@mui/material");
 var react_1 = tslib_1.__importDefault(require("react"));
 var Iphone_style_1 = require("./Iphone.style");
 var Iphone = function (_a) {
-    var width = _a.width, children = _a.children;
-    var style = (0, Iphone_style_1.useStyles)({ width: width });
+    var width = _a.width, children = _a.children, _b = _a.color, color = _b === void 0 ? 'black' : _b;
+    var style = (0, Iphone_style_1.useStyles)({ width: width, color: color });
     // const [time, setTime] = useState(new Date())
     // useEffect(() => {
     //     setInterval(() => setTime(new Date()), 1000)
     // }, [])
-    return (react_1["default"].createElement(material_1.Box, { sx: style.iphone },
-        react_1["default"].createElement(material_1.Box, { sx: style.buttons },
-            react_1["default"].createElement(material_1.Box, { sx: style.silencer }),
-            react_1["default"].createElement(material_1.Box, { sx: style.volumeUp }),
-            react_1["default"].createElement(material_1.Box, { sx: style.volumeDown })),
-        react_1["default"].createElement(material_1.Box, { sx: style.powerButton }),
-        react_1["default"].createElement(material_1.Box, { sx: style.display },
-            react_1["default"].createElement(material_1.Box, { sx: style.floatinIsland },
-                react_1["default"].createElement(material_1.Box, { sx: style.camera })),
-            react_1["default"].createElement(material_1.Box, { sx: style.children }, children))));
+    return (react_1.default.createElement(material_1.Box, { sx: style.iphone },
+        react_1.default.createElement(material_1.Box, { sx: style.buttons },
+            react_1.default.createElement(material_1.Box, { sx: style.silencer }),
+            react_1.default.createElement(material_1.Box, { sx: style.volumeUp }),
+            react_1.default.createElement(material_1.Box, { sx: style.volumeDown })),
+        react_1.default.createElement(material_1.Box, { sx: style.powerButton }),
+        react_1.default.createElement(material_1.Box, { sx: style.display },
+            react_1.default.createElement(material_1.Box, { sx: style.floatinIsland },
+                react_1.default.createElement(material_1.Box, { sx: style.camera })),
+            react_1.default.createElement(material_1.Box, { sx: style.children }, children))));
 };
 exports.Iphone = Iphone;
 //# sourceMappingURL=Iphone.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Iphone.js","sourceRoot":"","sources":["../../../../src/components/Iphone/Iphone.tsx"],"names":[],"mappings":";;;;AAAA,0CAAoC;AACpC,wDAA0B;AAE1B,+CAA2C;AAEpC,IAAM,MAAM,GAAG,UAAC,EAGT;QAFV,KAAK,WAAA,EACL,QAAQ,cAAA;IAER,IAAM,KAAK,GAAG,IAAA,wBAAS,EAAC,EAAE,KAAK,OAAA,EAAE,CAAC,CAAA;IAClC,+CAA+C;IAE/C,oBAAoB;IACpB,mDAAmD;IACnD,SAAS;IAET,OAAO,CACH,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM;QACjB,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,GAAQ;YAC/B,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,GAAQ;YAC/B,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,UAAU,GAAQ,CAC/B;QACN,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,WAAW,GAAQ;QAClC,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,aAAa;gBACxB,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM,GAAQ,CAC3B;YACN,iCAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,IASlB,QAAQ,CACP,CACJ,CACJ,CACT,CAAA;AACL,CAAC,CAAA;AArCY,QAAA,MAAM,UAqClB"}
+{"version":3,"file":"Iphone.js","sourceRoot":"","sources":["../../../../src/components/Iphone/Iphone.tsx"],"names":[],"mappings":";;;;AAAA,0CAAoC;AACpC,wDAA0B;AAE1B,+CAA2C;AAEpC,IAAM,MAAM,GAAG,UAAC,EAIT;QAHV,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,aAAe,EAAf,KAAK,mBAAG,OAAO,KAAA;IAEf,IAAM,KAAK,GAAG,IAAA,wBAAS,EAAC,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAA;IACzC,+CAA+C;IAE/C,oBAAoB;IACpB,mDAAmD;IACnD,SAAS;IAET,OAAO,CACH,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM;QACjB,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,GAAQ;YAC/B,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,GAAQ;YAC/B,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,UAAU,GAAQ,CAC/B;QACN,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,WAAW,GAAQ;QAClC,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,OAAO;YAClB,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,aAAa;gBACxB,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM,GAAQ,CAC3B;YACN,8BAAC,cAAG,IAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,IASlB,QAAQ,CACP,CACJ,CACJ,CACT,CAAA;AACL,CAAC,CAAA;AAtCY,QAAA,MAAM,UAsClB"}

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

@@ -1,5 +1,7 @@
 import { ReactNode } from "react";
+export type IphoneColor = 'black' | 'silver' | 'sage' | 'mist-blue' | 'lavender' | 'cosmic-orange' | 'deep-blue';
 export interface IphoneProps {
     width: number;
-    children: ReactNode;
+    children?: ReactNode;
+    color?: IphoneColor;
 }

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

@@ -1,3 +1,3 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=Iphone.props.js.map

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

@@ -1,4 +1,5 @@
-export declare const useStyles: ({ width }: StyleProps) => {
+import { IphoneColor } from "./Iphone.props";
+export declare const useStyles: ({ width, color }: StyleProps) => {
     iphone: {
         width: number;
         height: number;
@@ -94,5 +95,6 @@ export declare const useStyles: ({ width }: StyleProps) => {
 };
 interface StyleProps {
     width: number;
+    color?: IphoneColor;
 }
 export {};

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

@@ -1,9 +1,68 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
+var IPHONE_COLORS = {
+    black: {
+        accent: '#3c3c3e',
+        highlight: '#5c5c5e',
+        mid: '#2c2c2e',
+        shadow: '#1c1c1e',
+        border: '#4a4a4c',
+        frame: '#313131'
+    },
+    silver: {
+        accent: '#e5e5e7',
+        highlight: '#ffffff',
+        mid: '#f2f2f7',
+        shadow: '#aeaeb2',
+        border: '#d1d1d6',
+        frame: '#e5e5e7'
+    },
+    sage: {
+        accent: '#b4c3a1',
+        highlight: '#d4e3c1',
+        mid: '#c4d3b1',
+        shadow: '#849371',
+        border: '#a4b391',
+        frame: '#b4c3a1'
+    },
+    'mist-blue': {
+        accent: '#a3b5c7',
+        highlight: '#c3d5e7',
+        mid: '#b3c5d7',
+        shadow: '#738597',
+        border: '#93a5b7',
+        frame: '#a3b5c7'
+    },
+    lavender: {
+        accent: '#d6cce2',
+        highlight: '#f6ecff',
+        mid: '#e6dcf2',
+        shadow: '#a69cb2',
+        border: '#c6bcd2',
+        frame: '#d6cce2'
+    },
+    'cosmic-orange': {
+        accent: '#d35e3b',
+        highlight: '#f4a485',
+        mid: '#c14f31',
+        shadow: '#7d2d12',
+        border: '#d35e3b',
+        frame: '#bd4d28'
+    },
+    'deep-blue': {
+        accent: '#2c3e50',
+        highlight: '#546e7a',
+        mid: '#1a252f',
+        shadow: '#0c141a',
+        border: '#2c3e50',
+        frame: '#1c2a38'
+    }
+};
 var useStyles = function (_a) {
-    var width = _a.width;
-    return ({
+    var width = _a.width, _b = _a.color, color = _b === void 0 ? 'black' : _b;
+    var theme = IPHONE_COLORS[color];
+    return {
         iphone: {
             width: width,
             height: width * 2.07,
@@ -13,7 +72,7 @@ var useStyles = function (_a) {
         },
         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"),
+            boxShadow: "inset 0 0 0 ".concat(width * 0.001, "px ").concat(theme.frame, ", inset 0 0 0 ").concat(width * 0.002, "px ").concat(theme.shadow, ", inset 0 0 0 ").concat(width * 0.003, "px ").concat(theme.mid, ", inset 0 0 0 ").concat(width * 0.004, "px ").concat(theme.accent, ", inset 0 0 0 ").concat(width * 0.006, "px ").concat(theme.highlight, ", inset 0 0 0 ").concat(width * 0.007, "px ").concat(theme.accent, ", inset 0 0 0 ").concat(width * 0.008, "px ").concat(theme.accent, ", inset 0 0 0 ").concat(width * 0.009, "px ").concat(theme.mid, ", inset 0 0 0 ").concat(width * 0.010, "px ").concat(theme.mid, ", inset 0 0 0 ").concat(width * 0.012, "px ").concat(theme.mid, ", 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)',
@@ -25,7 +84,7 @@ var useStyles = function (_a) {
             height: "".concat(width * 1.989, "px"),
             overflow: 'scroll',
             borderRadius: "".concat(width / 7.5, "px"),
-            margin: "".concat(width * 0.0415, "px auto")
+            margin: "".concat(width * 0.0415, "px auto"),
         },
         floatinIsland: {
             width: "".concat(width * 0.267, "px"),
@@ -46,25 +105,25 @@ var useStyles = function (_a) {
             width: "".concat(width * 0.0050, "px"),
             position: 'absolute',
             top: "".concat(width * 0.364, "px"),
-            left: "-".concat(width * 0.0050, "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"),
+            border: "".concat(width * 0.001, "px solid ").concat(theme.border),
             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")
+            backgroundImage: "linear-gradient(to bottom, ".concat(theme.mid, " 0%, ").concat(theme.highlight, " 2%, ").concat(theme.shadow, " 4%, ").concat(theme.accent, " 10%, ").concat(theme.accent, " 90%, ").concat(theme.shadow, " 94%, ").concat(theme.highlight, " 98%, ").concat(theme.mid, " 100%)"),
+            boxShadow: "inset ".concat(width * 0.001, "px 0 0 ").concat(theme.accent)
         },
         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"),
+            border: "".concat(width * 0.001, "px solid ").concat(theme.border),
             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"),
+            backgroundImage: "linear-gradient(to bottom, ".concat(theme.mid, " 0%, ").concat(theme.highlight, " 2%, ").concat(theme.shadow, " 4%, ").concat(theme.accent, " 10%, ").concat(theme.accent, " 90%, ").concat(theme.shadow, " 94%, ").concat(theme.highlight, " 98%, ").concat(theme.mid, " 100%)"),
+            boxShadow: "inset ".concat(width * 0.001, "px 0 0 ").concat(theme.accent),
             position: 'absolute',
             top: "".concat(width * 0.137, "px")
         },
@@ -72,10 +131,10 @@ var useStyles = function (_a) {
             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"),
+            border: "".concat(width * 0.001, "px solid ").concat(theme.border),
             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"),
+            backgroundImage: "linear-gradient(to bottom, ".concat(theme.mid, " 0%, ").concat(theme.highlight, " 2%, ").concat(theme.shadow, " 4%, ").concat(theme.accent, " 10%, ").concat(theme.accent, " 90%, ").concat(theme.shadow, " 94%, ").concat(theme.highlight, " 98%, ").concat(theme.mid, " 100%)"),
+            boxShadow: "inset ".concat(width * 0.001, "px 0 0 ").concat(theme.accent),
             position: 'absolute',
             top: "".concat(width * 0.316, "px")
         },
@@ -86,17 +145,17 @@ var useStyles = function (_a) {
             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"),
+            border: "".concat(width * 0.001, "px solid ").concat(theme.border),
             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")
+            backgroundImage: "linear-gradient(to bottom, ".concat(theme.mid, " 0%, ").concat(theme.highlight, " 2%, ").concat(theme.shadow, " 4%, ").concat(theme.accent, " 10%, ").concat(theme.accent, " 90%, ").concat(theme.shadow, " 94%, ").concat(theme.highlight, " 98%, ").concat(theme.mid, " 100%)"),
+            boxShadow: "inset -".concat(width * 0.001, "px 0 0 ").concat(theme.accent),
         },
         statusBar: {
             backgroundColor: 'white'
         },
         timeContainer: {},
         iconContainer: {}
-    });
+    };
 };
 exports.useStyles = useStyles;
 //# sourceMappingURL=Iphone.style.js.map

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

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

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

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Iphone"), exports);
 tslib_1.__exportStar(require("./Iphone.props"), exports);

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

@@ -1,14 +1,14 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mac = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-var _1 = require(".");
+var Mac_styles_1 = require("./Mac.styles");
 var Startup_1 = require("./components/Startup");
 var Mac = function (_a) {
-    var startup = _a.startup, animateOpen = _a.animateOpen, open = _a.open, width = _a.width, openAngle = _a.openAngle, children = _a.children, _b = _a.perspective, perspective = _b === void 0 ? 120 : _b;
+    var startup = _a.startup, animateOpen = _a.animateOpen, open = _a.open, width = _a.width, openAngle = _a.openAngle, children = _a.children, _b = _a.perspective, perspective = _b === void 0 ? 2000 : _b;
     var _c = (0, react_1.useState)(animateOpen ? false : open), macOpen = _c[0], setMacOpen = _c[1];
-    var styles = (0, _1.useStyles)({ width: width, macOpen: macOpen, openAngle: openAngle, perspective: perspective });
+    var styles = (0, Mac_styles_1.useStyles)({ width: width, macOpen: macOpen, openAngle: openAngle, perspective: perspective });
     (0, react_1.useEffect)(function () {
         if (animateOpen) {
             setTimeout(function () { return setMacOpen(open); }, 100);
@@ -17,21 +17,21 @@ var Mac = function (_a) {
             setMacOpen(open);
         }
     }, [open, animateOpen]);
-    return (react_1["default"].createElement("div", { style: styles.mac },
-        react_1["default"].createElement("div", { className: 'top-portion', style: styles.topPortion },
-            react_1["default"].createElement("div", { className: 'lid', style: styles.lid }),
-            react_1["default"].createElement("div", { className: 'top', style: styles.top },
-                react_1["default"].createElement("div", { className: 'screen', style: styles.screen },
-                    react_1["default"].createElement("div", { className: "camera", style: styles.camera }),
-                    react_1["default"].createElement(Startup_1.Startup, { show: startup }),
-                    react_1["default"].createElement("div", { style: styles.screenContent }, children)),
-                react_1["default"].createElement("div", { className: 'engraving', style: styles.engraving }, "Macbook Pro"),
-                react_1["default"].createElement("div", { className: 'after-screen', style: styles.afterScreen }))),
-        react_1["default"].createElement("div", { className: 'bottom-portion', style: styles.bottomPortion },
-            react_1["default"].createElement("div", { className: 'bottom-cover', style: styles.bottomCover }),
-            react_1["default"].createElement("div", { className: 'bottom', style: styles.bottom },
-                react_1["default"].createElement("div", { className: "opener", style: styles.opener }),
-                react_1["default"].createElement("div", { className: "bottom-after", style: styles.bottomAfter })))));
+    return (react_1.default.createElement("div", { style: styles.mac },
+        react_1.default.createElement("div", { className: 'top-portion', style: styles.topPortion },
+            react_1.default.createElement("div", { className: 'lid', style: styles.lid }),
+            react_1.default.createElement("div", { className: 'top', style: styles.top },
+                react_1.default.createElement("div", { className: 'screen', style: styles.screen },
+                    react_1.default.createElement("div", { className: "camera", style: styles.camera }),
+                    react_1.default.createElement(Startup_1.Startup, { show: startup }),
+                    react_1.default.createElement("div", { style: styles.screenContent }, children)),
+                react_1.default.createElement("div", { className: 'engraving', style: styles.engraving }, "Macbook Pro"),
+                react_1.default.createElement("div", { className: 'after-screen', style: styles.afterScreen }))),
+        react_1.default.createElement("div", { className: 'bottom-portion', style: styles.bottomPortion },
+            react_1.default.createElement("div", { className: 'bottom-cover', style: styles.bottomCover }),
+            react_1.default.createElement("div", { className: 'bottom', style: styles.bottom },
+                react_1.default.createElement("div", { className: "opener", style: styles.opener }),
+                react_1.default.createElement("div", { className: "bottom-after", style: styles.bottomAfter })))));
 };
 exports.Mac = Mac;
 //# sourceMappingURL=Mac.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Mac.js","sourceRoot":"","sources":["../../../../src/components/Mac/Mac.tsx"],"names":[],"mappings":";;;;AAAA,qDAAmD;AACnD,sBAAwC;AACxC,gDAA+C;AAExC,IAAM,GAAG,GAAG,UAAC,EAQT;QAPP,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,mBAAiB,EAAjB,WAAW,mBAAG,GAAG,KAAA;IAEX,IAAA,KAAwB,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAA3D,OAAO,QAAA,EAAE,UAAU,QAAwC,CAAA;IAClE,IAAM,MAAM,GAAG,IAAA,YAAS,EAAC,EAAE,KAAK,OAAA,EAAE,OAAO,SAAA,EAAE,SAAS,WAAA,EAAE,WAAW,aAAA,EAAE,CAAC,CAAA;IAEpE,IAAA,iBAAS,EAAC;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,0CAAK,KAAK,EAAE,MAAM,CAAC,GAAG;QAClB,0CAAK,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,MAAM,CAAC,UAAU;YACjD,0CAAK,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,GAAG,GAAQ;YAC9C,0CAAK,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,GAAG;gBAClC,0CAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM;oBACxC,0CAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAQ;oBACpD,iCAAC,iBAAO,IAAC,IAAI,EAAE,OAAO,GAAI;oBAC1B,0CAAK,KAAK,EAAE,MAAM,CAAC,aAAa,IAC3B,QAAQ,CACP,CACJ;gBACN,0CAAK,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,MAAM,CAAC,SAAS,kBAAmB;gBACrE,0CAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,GAAQ,CAC7D,CACJ;QACN,0CAAK,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,MAAM,CAAC,aAAa;YACvD,0CAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,GAAQ;YAC/D,0CAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM;gBACxC,0CAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAQ;gBACpD,0CAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,GAAQ,CAC7D,CACJ,CACJ,CACT,CAAA;AACL,CAAC,CAAA;AA5CY,QAAA,GAAG,OA4Cf"}
+{"version":3,"file":"Mac.js","sourceRoot":"","sources":["../../../../src/components/Mac/Mac.tsx"],"names":[],"mappings":";;;;AAAA,qDAAmD;AAEnD,2CAAyC;AACzC,gDAA+C;AAExC,IAAM,GAAG,GAAG,UAAC,EAQT;QAPP,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA;IAEZ,IAAA,KAAwB,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAA3D,OAAO,QAAA,EAAE,UAAU,QAAwC,CAAA;IAClE,IAAM,MAAM,GAAG,IAAA,sBAAS,EAAC,EAAE,KAAK,OAAA,EAAE,OAAO,SAAA,EAAE,SAAS,WAAA,EAAE,WAAW,aAAA,EAAE,CAAC,CAAA;IAEpE,IAAA,iBAAS,EAAC;QACN,IAAI,WAAW,EAAE,CAAC;YACd,UAAU,CAAC,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EAAE,GAAG,CAAC,CAAA;QAC3C,CAAC;aAAM,CAAC;YACJ,UAAU,CAAC,IAAI,CAAC,CAAA;QACpB,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IACvB,OAAO,CACH,uCAAK,KAAK,EAAE,MAAM,CAAC,GAAG;QAClB,uCAAK,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,MAAM,CAAC,UAAU;YACjD,uCAAK,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,GAAG,GAAQ;YAC9C,uCAAK,SAAS,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,GAAG;gBAClC,uCAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM;oBACxC,uCAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAQ;oBACpD,8BAAC,iBAAO,IAAC,IAAI,EAAE,OAAO,GAAI;oBAC1B,uCAAK,KAAK,EAAE,MAAM,CAAC,aAAa,IAC3B,QAAQ,CACP,CACJ;gBACN,uCAAK,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,MAAM,CAAC,SAAS,kBAAmB;gBACrE,uCAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,GAAQ,CAC7D,CACJ;QACN,uCAAK,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,MAAM,CAAC,aAAa;YACvD,uCAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,GAAQ;YAC/D,uCAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM;gBACxC,uCAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,GAAQ;gBACpD,uCAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,WAAW,GAAQ,CAC7D,CACJ,CACJ,CACT,CAAA;AACL,CAAC,CAAA;AA5CY,QAAA,GAAG,OA4Cf"}

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

@@ -1,3 +1,3 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=Mac.props.js.map

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

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var useStyles = function (_a) {
     var width = _a.width, macOpen = _a.macOpen, openAngle = _a.openAngle, perspective = _a.perspective;
@@ -11,15 +11,15 @@ var useStyles = function (_a) {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-            perspective: "".concat(perspective, "vw"),
+            perspective: "".concat(perspective, "px"),
             perspectiveOrigin: '50% 100%',
             transition: 'right 1s',
-            margin: "0 ".concat(width / 9, "px")
+            margin: "0 ".concat(width / 9, "px"),
         },
         topPortion: {
             transformStyle: 'preserve-3d',
             transform: "rotateX(-".concat(macOpen ? openAngle !== null && openAngle !== void 0 ? openAngle : 0 : 90, "deg)"),
-            transformOrigin: '50% 100%'
+            transformOrigin: '50% 100%',
         },
         lid: {
             position: 'absolute',
@@ -50,7 +50,7 @@ var useStyles = function (_a) {
             boxSizing: 'border-box',
             position: 'relative',
             overflow: 'hidden',
-            top: 1
+            top: 1,
         },
         engraving: {
             zIndex: 1,
@@ -80,7 +80,7 @@ var useStyles = function (_a) {
             top: -(width * 0.683 * 0.073170731707317) / 2,
             left: '50%',
             transform: 'translate(-50%, -50%)',
-            border: "".concat(width / 266.66, " solid rgb(20, 20, 20)")
+            border: "".concat(width / 266.66, " solid rgb(20, 20, 20)"),
         },
         innerScreen: {
             position: 'absolute',
@@ -149,7 +149,7 @@ var useStyles = function (_a) {
             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'
+            boxShadow: 'inset 0 -5px 10px black, 0 5px 10px',
         }
     });
 };

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

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Startup = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
@@ -15,12 +15,12 @@ var Startup = function (_a) {
             setTimeout(function () { return setMacShow(false); }, 2500);
         }
     });
-    return (react_1["default"].createElement(react_1["default"].Fragment, null, macShow &&
-        react_1["default"].createElement("div", { className: 'startup', 
+    return (react_1.default.createElement(react_1.default.Fragment, null, macShow &&
+        react_1.default.createElement("div", { className: 'startup', 
             //@ts-ignore - using 'position' property should be legal but ts is screaming at me fsr
             style: styles.startup },
-            react_1["default"].createElement("svg", { style: styles.startupSvg, id: "svg2", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 842.32 1000" },
-                react_1["default"].createElement("path", { id: "path4", d: "M824.67,779.3A544.21,544.21,0,0,1,770.9,876q-42.4,60.45-69.25,83.7-41.49,38.15-89,39.19c-22.78,0-50.25-6.48-82.22-19.62s-61.56-19.57-88.52-19.57q-42.4,0-91,19.57t-78.65,20.67q-45.65,2-91-40.24-29-25.27-72.43-86.67-46.59-65.55-76.6-152.15Q0,627.24,0,539.51,0,439,43.49,366.25q34.19-58.35,91.07-92.12c38-22.53,79-34,123.14-34.75,24.16,0,55.85,7.48,95.23,22.17s64.49,22.21,75.54,22.21c8.27,0,36.28-8.74,83.77-26.16q67.35-24.24,113.85-20.22,126.21,10.19,189.38,99.71Q702.6,405.48,703.74,528.45q1,95.71,69.32,159.07A227.93,227.93,0,0,0,842.32,733Q834,757.11,824.67,779.3ZM631.71,20q0,75-54.69,139.92c-43.95,51.38-97.11,81.08-154.75,76.39a154.5,154.5,0,0,1-1.17-18.95c0-48,20.91-99.39,58-141.4q27.79-31.9,70.68-53.07Q592.58,2.05,630.66,0a181.89,181.89,0,0,1,1.05,20Z" })))));
+            react_1.default.createElement("svg", { style: styles.startupSvg, id: "svg2", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 842.32 1000" },
+                react_1.default.createElement("path", { id: "path4", d: "M824.67,779.3A544.21,544.21,0,0,1,770.9,876q-42.4,60.45-69.25,83.7-41.49,38.15-89,39.19c-22.78,0-50.25-6.48-82.22-19.62s-61.56-19.57-88.52-19.57q-42.4,0-91,19.57t-78.65,20.67q-45.65,2-91-40.24-29-25.27-72.43-86.67-46.59-65.55-76.6-152.15Q0,627.24,0,539.51,0,439,43.49,366.25q34.19-58.35,91.07-92.12c38-22.53,79-34,123.14-34.75,24.16,0,55.85,7.48,95.23,22.17s64.49,22.21,75.54,22.21c8.27,0,36.28-8.74,83.77-26.16q67.35-24.24,113.85-20.22,126.21,10.19,189.38,99.71Q702.6,405.48,703.74,528.45q1,95.71,69.32,159.07A227.93,227.93,0,0,0,842.32,733Q834,757.11,824.67,779.3ZM631.71,20q0,75-54.69,139.92c-43.95,51.38-97.11,81.08-154.75,76.39a154.5,154.5,0,0,1-1.17-18.95c0-48,20.91-99.39,58-141.4q27.79-31.9,70.68-53.07Q592.58,2.05,630.66,0a181.89,181.89,0,0,1,1.05,20Z" })))));
 };
 exports.Startup = Startup;
 //# sourceMappingURL=Startup.js.map