anim-3d-obj 1.1.72 → 1.1.73

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

@@ -1,13 +1,10 @@
+import { FaceType } from "./types";
 interface FaceProps {
     children?: any;
     depth?: number | any;
-    faceType?: any;
-    custom?: any;
+    face: FaceType;
     global?: any;
     height?: number | string;
-    id?: string | number | boolean;
-    styles?: object | any;
-    tranz: any;
     width?: number | string;
 }
 export default function Face(props: FaceProps): JSX.Element;

package/dist/esm/components/Face.js

@@ -1,39 +1,36 @@
 import styled from "styled-components";
-import React from "react";
 export default function Face(props) {
-    let { depth = 10, faceType, global = {}, height = 10, custom = false, tranz = 80, width = 100, } = props;
+    let { depth = 10, global = { css: "", body: "" }, height = 10, face, width = 100, } = props;
+    console.log(face);
     let transform;
-    let styles = !!custom[faceType] && !!custom[faceType].css
-        ? custom[faceType].css
-        : global.css;
-    const body = !!custom[faceType] && !!custom[faceType].body
-        ? custom[faceType].body
-        : global.body;
+    let tranz = +height / 2;
+    const body = face.body ? face.body : global.body;
+    console.log("====props====" + face.name);
+    console.log(props);
     ////////////////////////////////////////////////////////////////////////////// BOTTOM
-    if (faceType === "bottom") {
+    if (face.name === "bottom") {
         tranz = +height - +depth / 2;
         height = +depth;
         transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
-        //styles = !!custom["top"] ? custom : global;
     }
-    else if (faceType === "bottom_rear") {
+    else if (face.name === "bottom_rear") {
         tranz = +height - +depth / 2;
         height = +depth;
         transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${height}px)  `;
     }
-    else if (faceType === "bottom_front") {
+    else if (face.name === "bottom_front") {
         tranz = +height - +depth / 2;
         height = +depth;
         transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${-height}px)  `;
         ////////////////////////////////////////////////////////////////////////////// TOPS
     }
-    else if (faceType === "top") {
+    else if (face.name === "top") {
         height = +depth;
         if (!!depth)
             tranz = +depth / 2;
         transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
     }
-    else if (faceType === "top_rear") {
+    else if (face.name === "top_rear") {
         height = +depth;
         if (!!depth)
             tranz = +depth / 2;
@@ -41,7 +38,7 @@ export default function Face(props) {
         //translate3d(tx, ty, tz)
         transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${tranz * 2}px)  `;
     }
-    else if (faceType === "top_front") {
+    else if (face.name === "top_front") {
         height = +depth;
         if (!!depth)
             tranz = +depth / 2;
@@ -49,17 +46,17 @@ export default function Face(props) {
         //translate3d(tx, ty, tz)
         transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(${tranz * 2}px)  `;
     }
-    else if (faceType === "front") {
+    else if (face.name === "front") {
         if (!!depth)
             tranz = +depth / 2;
         transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
     }
-    else if (faceType === "back") {
+    else if (face.name === "back") {
         if (!!depth)
             tranz = +depth / 2;
         transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
     }
-    else if (faceType === "right") {
+    else if (face.name === "right") {
         if (height > width && !depth) {
             tranz = -(+height / 2 - +width);
             width = +height;
@@ -75,7 +72,7 @@ export default function Face(props) {
         transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
         // topr is to of Ribbon which points back
     }
-    else {
+    else if (face.name === "left") {
         if (height > width && !depth) {
             tranz = -(+height / 2 - +width);
             width = +height;
@@ -90,13 +87,22 @@ export default function Face(props) {
         }
         transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
     }
-    const BackFlip = styled.section ``;
+    else {
+        console.log(face.name + " is not a recognized face.name");
+    }
+    console.log(".....css");
+    console.log(`${face.css || global.css}
+   width: ${width}px;
+   position: absolute;
+   height: ${height}px;
+   ${transform}
+`);
     const Specs = styled.section `
-    ${styles}
+    ${face.css || global.css}
     width: ${width}px;
     position: absolute;
     height: ${height}px;
-    ${transform};
+    ${transform}
   `;
     return React.createElement(Specs, null, body);
 }

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

@@ -1,34 +1,2 @@
-interface ObjProps {
-    anim1?: object | undefined;
-    anim2?: object | undefined;
-    children?: any;
-    depth?: number;
-    global?: {
-        border?: string;
-        bgc?: string;
-        opac?: number | string;
-    } | any;
-    faces: {
-        front?: boolean | undefined;
-        back?: boolean | undefined;
-        left?: boolean | undefined;
-        right?: boolean | undefined;
-        top?: boolean | undefined;
-        top_rear?: boolean | undefined;
-        top_front?: boolean | undefined;
-        bottom?: boolean | undefined;
-        bottom_rear?: boolean | undefined;
-        bottom_front?: boolean | undefined;
-    };
-    height?: number | string;
-    custom?: object | string | undefined;
-    perspective?: string | number | undefined;
-    perspectiveOrigin?: string | undefined;
-    showCenterDiv?: string | number | boolean | undefined;
-    tranz?: number | undefined;
-    txt?: string | any;
-    width?: number;
-    zIndex?: number | undefined;
-}
+import { ObjProps } from "./types";
 export default function (props: ObjProps): JSX.Element;
-export {};

package/dist/esm/components/Obj.js

@@ -4,23 +4,22 @@ import { AnimWrap } from "./styles/AnimWrap";
 import { SceneStyle } from "./styles/Scene";
 import Face from "./Face";
 export default function (props) {
-    let { anim1, anim2, width = 5, height = 5, depth = 5, faces = { front: true }, global = {}, custom = {}, tranz = (+height / 2) | 0, perspective, perspectiveOrigin, zIndex, } = props;
+    let { anim1, anim2, width = 5, height = 5, depth = 5, global = {}, faces, perspective, perspectiveOrigin, zIndex, } = props;
     // process config
-    const buildFace = (faceType) => {
-        return (React.createElement(Face, { width: width, height: height, depth: depth, faceType: faceType, id: faceType, tranz: tranz, global: global, custom: custom }));
+    const buildFace = (face) => {
+        const details = {
+            width,
+            height,
+            depth,
+            face,
+            global,
+        };
+        return React.createElement(Face, Object.assign({}, details, { key: face.name }));
     };
     return (React.createElement(SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
         React.createElement(AnimWrap, { animSpecs: anim1 },
             React.createElement(AnimWrap, { animSpecs: anim2 },
-                React.createElement(ObjWrapper, null,
-                    !!faces && !!faces.front ? buildFace("front") : null,
-                    !!faces && !!faces.right ? buildFace("right") : null,
-                    !!faces && !!faces.back ? buildFace("back") : null,
-                    !!faces && !!faces.left ? buildFace("left") : null,
-                    !!faces && !!faces.top ? buildFace("top") : null,
-                    !!faces && !!faces.bottom ? buildFace("bottom") : null,
-                    !!faces && !!faces.top_rear ? buildFace("top_rear") : null,
-                    !!faces && !!faces.top_front ? buildFace("top_front") : null,
-                    !!faces && !!faces.bottom_rear ? buildFace("bottom_rear") : null,
-                    !!faces && !!faces.bottom_front ? buildFace("bottom_front") : null)))));
+                React.createElement(ObjWrapper, null, faces && faces[0]
+                    ? faces.map((face) => (face.name ? buildFace(face) : null))
+                    : null)))));
 }

package/package.json

@@ -6,6 +6,7 @@
 
 
 
+
 {
    "name": "anim-3d-obj",
    "repository": {
@@ -13,7 +14,7 @@
       "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
    },
    "homepage": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git",
-    "version": "1.1.72",
+    "version": "1.1.73",
    "description": "React library for creating 3D objects quickly.  Also these objects can be animated",
    "main": "dist/cjs/index.js",
    "module": "dist/esm/index.js",

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

@@ -1,14 +0,0 @@
-interface FaceProps {
-    children?: any;
-    depth?: number | any;
-    faceType?: any;
-    custom?: any;
-    global?: any;
-    height?: number | string;
-    id?: string | number | boolean;
-    styles?: object | any;
-    tranz: any;
-    width?: number | string;
-}
-export default function Face(props: FaceProps): JSX.Element;
-export {};

package/dist/cjs/components/Face.js

@@ -1,108 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_1 = __importDefault(require("react"));
-function Face(props) {
-    let { depth = 10, faceType, global = {}, height = 10, custom = false, tranz = 80, width = 100, } = props;
-    let transform;
-    let styles = !!custom[faceType] && !!custom[faceType].css
-        ? custom[faceType].css
-        : global.css;
-    const body = !!custom[faceType] && !!custom[faceType].body
-        ? custom[faceType].body
-        : global.body;
-    ////////////////////////////////////////////////////////////////////////////// BOTTOM
-    if (faceType === "bottom") {
-        tranz = +height - +depth / 2;
-        height = +depth;
-        transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
-        //styles = !!custom["top"] ? custom : global;
-    }
-    else if (faceType === "bottom_rear") {
-        tranz = +height - +depth / 2;
-        height = +depth;
-        transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${height}px)  `;
-    }
-    else if (faceType === "bottom_front") {
-        tranz = +height - +depth / 2;
-        height = +depth;
-        transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${-height}px)  `;
-        ////////////////////////////////////////////////////////////////////////////// TOPS
-    }
-    else if (faceType === "top") {
-        height = +depth;
-        if (!!depth)
-            tranz = +depth / 2;
-        transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
-    }
-    else if (faceType === "top_rear") {
-        height = +depth;
-        if (!!depth)
-            tranz = +depth / 2;
-        let offset = depth / 2;
-        //translate3d(tx, ty, tz)
-        transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${tranz * 2}px)  `;
-    }
-    else if (faceType === "top_front") {
-        height = +depth;
-        if (!!depth)
-            tranz = +depth / 2;
-        let offset = depth / 2;
-        //translate3d(tx, ty, tz)
-        transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(${tranz * 2}px)  `;
-    }
-    else if (faceType === "front") {
-        if (!!depth)
-            tranz = +depth / 2;
-        transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
-    }
-    else if (faceType === "back") {
-        if (!!depth)
-            tranz = +depth / 2;
-        transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
-    }
-    else if (faceType === "right") {
-        if (height > width && !depth) {
-            tranz = -(+height / 2 - +width);
-            width = +height;
-        }
-        else if (width > height && !depth) {
-            tranz = +height / 2;
-            height = +width;
-        }
-        else {
-            tranz = +width - +depth / 2;
-            width = +depth;
-        }
-        transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
-        // topr is to of Ribbon which points back
-    }
-    else {
-        if (height > width && !depth) {
-            tranz = -(+height / 2 - +width);
-            width = +height;
-        }
-        else if (width > height && !depth) {
-            tranz = +height / 2;
-            height = +width;
-        }
-        else {
-            tranz = +depth / 2;
-            width = +depth;
-        }
-        transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
-    }
-    const BackFlip = styled_components_1.default.section ``;
-    const Specs = styled_components_1.default.section `
-    ${styles}
-    width: ${width}px;
-    position: absolute;
-    height: ${height}px;
-    ${transform};
-  `;
-    return react_1.default.createElement(Specs, null, body);
-}
-exports.default = Face;

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

@@ -1,34 +0,0 @@
-interface ObjProps {
-    anim1?: object | undefined;
-    anim2?: object | undefined;
-    children?: any;
-    depth?: number;
-    global?: {
-        border?: string;
-        bgc?: string;
-        opac?: number | string;
-    } | any;
-    faces: {
-        front?: boolean | undefined;
-        back?: boolean | undefined;
-        left?: boolean | undefined;
-        right?: boolean | undefined;
-        top?: boolean | undefined;
-        top_rear?: boolean | undefined;
-        top_front?: boolean | undefined;
-        bottom?: boolean | undefined;
-        bottom_rear?: boolean | undefined;
-        bottom_front?: boolean | undefined;
-    };
-    height?: number | string;
-    custom?: object | string | undefined;
-    perspective?: string | number | undefined;
-    perspectiveOrigin?: string | undefined;
-    showCenterDiv?: string | number | boolean | undefined;
-    tranz?: number | undefined;
-    txt?: string | any;
-    width?: number;
-    zIndex?: number | undefined;
-}
-export default function (props: ObjProps): JSX.Element;
-export {};

package/dist/cjs/components/Obj.js

@@ -1,32 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Global_1 = require("./styles/Global");
-const AnimWrap_1 = require("./styles/AnimWrap");
-const Scene_1 = require("./styles/Scene");
-const Face_1 = __importDefault(require("./Face"));
-function default_1(props) {
-    let { anim1, anim2, width = 5, height = 5, depth = 5, faces = { front: true }, global = {}, custom = {}, tranz = (+height / 2) | 0, perspective, perspectiveOrigin, zIndex, } = props;
-    // process config
-    const buildFace = (faceType) => {
-        return (react_1.default.createElement(Face_1.default, { width: width, height: height, depth: depth, faceType: faceType, id: faceType, tranz: tranz, global: global, custom: custom }));
-    };
-    return (react_1.default.createElement(Scene_1.SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
-        react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim1 },
-            react_1.default.createElement(AnimWrap_1.AnimWrap, { animSpecs: anim2 },
-                react_1.default.createElement(Global_1.ObjWrapper, null,
-                    !!faces && !!faces.front ? buildFace("front") : null,
-                    !!faces && !!faces.right ? buildFace("right") : null,
-                    !!faces && !!faces.back ? buildFace("back") : null,
-                    !!faces && !!faces.left ? buildFace("left") : null,
-                    !!faces && !!faces.top ? buildFace("top") : null,
-                    !!faces && !!faces.bottom ? buildFace("bottom") : null,
-                    !!faces && !!faces.top_rear ? buildFace("top_rear") : null,
-                    !!faces && !!faces.top_front ? buildFace("top_front") : null,
-                    !!faces && !!faces.bottom_rear ? buildFace("bottom_rear") : null,
-                    !!faces && !!faces.bottom_front ? buildFace("bottom_front") : null)))));
-}
-exports.default = default_1;

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

@@ -1,2 +0,0 @@
-export * from "./Obj";
-export * from "./Face";

package/dist/cjs/components/index.js

@@ -1,18 +0,0 @@
-"use strict";
-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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Obj"), exports);
-__exportStar(require("./Face"), exports);

package/dist/cjs/components/styles/AnimWrap.d.ts

@@ -1,2 +0,0 @@
-import { AnimStylesProps } from "./Anim";
-export declare const AnimWrap: (props: AnimStylesProps) => JSX.Element;

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

@@ -1,88 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnimWrap = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_1 = __importDefault(require("react"));
-const Anims_1 = require("./Anims");
-const AnimWrap = (props) => {
-    const { children, animSpecs } = props;
-    const AS = animSpecs;
-    const { X360, Y360, fadeInkf, wobY, wobX, fwdx018, fwdx1836, fwdx09, fwdx918, fwdx1827, fwdx2736, fwdy018, fwdy1836, fwdy09, fwdy918, fwdy1827, fwdy2736, floatX, floatShadow, pulseSM, pulseMD, pulseLG, swing, swingDecay, noAnim, } = (0, Anims_1.allAnims)({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
-    let theAnim = "noAnim";
-    if (AS.name === "X360")
-        theAnim = X360;
-    else if (AS.name === "Y360")
-        theAnim = Y360;
-    else if (AS.name === "fadeInkf")
-        theAnim = fadeInkf;
-    else if (AS.name === "wobX")
-        theAnim = wobX;
-    else if (AS.name === "wobY")
-        theAnim = wobY;
-    else if (AS.name === "fwdx018")
-        theAnim = fwdx018;
-    else if (AS.name === "fwdx1836")
-        theAnim = fwdx1836;
-    else if (AS.name === "fwdx09")
-        theAnim = fwdx09;
-    else if (AS.name === "fwdx918")
-        theAnim = fwdx918;
-    else if (AS.name === "fwdx1827")
-        theAnim = fwdx1827;
-    else if (AS.name === "fwdx2736")
-        theAnim = fwdx2736;
-    else if (AS.name === "fwdy018")
-        theAnim = fwdy018;
-    else if (AS.name === "fwdy1836")
-        theAnim = fwdy1836;
-    else if (AS.name === "fwdy09")
-        theAnim = fwdy09;
-    else if (AS.name === "fwdy918")
-        theAnim = fwdy918;
-    else if (AS.name === "fwdy1827")
-        theAnim = fwdy1827;
-    else if (AS.name === "fwdy2736")
-        theAnim = fwdy2736;
-    else if (AS.name === "floatX")
-        theAnim = floatX;
-    else if (AS.name === "floatShadow")
-        theAnim = floatShadow;
-    else if (AS.name === "pulseSM")
-        theAnim = pulseSM;
-    else if (AS.name === "pulseMD")
-        theAnim = pulseMD;
-    else if (AS.name === "pulseLG")
-        theAnim = pulseLG;
-    else if (AS.name === "swing")
-        theAnim = swing;
-    else if (AS.name === "swingDecay")
-        theAnim = swingDecay;
-    else
-        theAnim = noAnim;
-    const AnimWrapDiv = styled_components_1.default.div `
-    width: 100%;
-    height: 100%;
-    position: relative;
-    transform-style: preserve-3d;
-    border: ${AS.border};
-    -webkit-animation-duration: ${AS.duration}s;
-    animation-duration: ${AS.duration}s;
-    -webkit-animation-iteration-count: ${AS.iterationCount};
-    animation-iteration-count: ${AS.iterationCount};
-    -webkit-animation-name: ${theAnim};
-    animation-name: ${theAnim};
-    -webkit-animation-fill-mode: ${AS.fillMode};
-    animation-fill-mode: ${AS.fillMode};
-    animation-direction: ${AS.direction};
-    -webkit-animation-direction: ${AS.direction};
-    -webkit-animation-timing-function: ${AS.timing};
-    animation-timing-function: ${AS.timing};
-    -webkit-animation-delay: ${AS.delay}s;
-    animation-delay: ${AS.delay}s;
-  `;
-    return react_1.default.createElement(AnimWrapDiv, null, children);
-};
-exports.AnimWrap = AnimWrap;

package/dist/cjs/components/styles/Anims.d.ts

@@ -1,32 +0,0 @@
-interface AllAnimsProps {
-    degreesLow?: number;
-    degreesHi?: number;
-}
-export declare const allAnims: (props: AllAnimsProps) => {
-    X360: import("styled-components").Keyframes;
-    Y360: import("styled-components").Keyframes;
-    fadeInkf: import("styled-components").Keyframes;
-    wobY: import("styled-components").Keyframes;
-    wobX: import("styled-components").Keyframes;
-    fwdx018: import("styled-components").Keyframes;
-    fwdx1836: import("styled-components").Keyframes;
-    fwdx09: import("styled-components").Keyframes;
-    fwdx918: import("styled-components").Keyframes;
-    fwdx1827: import("styled-components").Keyframes;
-    fwdx2736: import("styled-components").Keyframes;
-    fwdy018: import("styled-components").Keyframes;
-    fwdy1836: import("styled-components").Keyframes;
-    fwdy09: import("styled-components").Keyframes;
-    fwdy918: import("styled-components").Keyframes;
-    fwdy1827: import("styled-components").Keyframes;
-    fwdy2736: import("styled-components").Keyframes;
-    floatX: import("styled-components").Keyframes;
-    floatShadow: import("styled-components").Keyframes;
-    pulseSM: import("styled-components").Keyframes;
-    pulseMD: import("styled-components").Keyframes;
-    pulseLG: import("styled-components").Keyframes;
-    swing: import("styled-components").Keyframes;
-    swingDecay: import("styled-components").Keyframes;
-    noAnim: import("styled-components").Keyframes;
-};
-export {};

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

@@ -1,329 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.allAnims = void 0;
-const styled_components_1 = require("styled-components");
-const allAnims = (props) => {
-    const { degreesLow = 0, degreesHi = 0 } = props;
-    const swing = (0, styled_components_1.keyframes) `
-    0% {
-        -webkit-transform-origin: top;
-            -ms-transform-origin: top;
-                transform-origin: top;
-        -webkit-transform: perspective(550px) rotateX(77deg);
-                transform: perspective(550px) rotateX(77deg);
-      }
-      50% {
-        -webkit-transform: perspective(550px) rotateX(-77deg);
-                transform: perspective(550px) rotateX(-77deg);
-      }
-      100% {
-        -webkit-transform-origin: top;
-            -ms-transform-origin: top;
-                transform-origin: top;
-        -webkit-transform: perspective(550px) rotateX(77deg);
-                transform: perspective(550px) rotateX(77deg);
-      }
-  `;
-    const swingDecay = (0, styled_components_1.keyframes) `
-   0% {
-    -webkit-transform-origin: top;
-        -ms-transform-origin: top;
-            transform-origin: top;
-    -webkit-transform: perspective(550px) rotateX(77deg);
-            transform: perspective(550px) rotateX(77deg);
-    }  
-    20% {
-        -webkit-transform: perspective(550px) rotateX(-55deg);
-                transform: perspective(550px) rotateX(-55deg);
-    }
-    40% {
-        -webkit-transform: perspective(550px) rotateX(44deg);
-                transform: perspective(550px) rotateX(44deg);
-    }
-
-    60% {
-        -webkit-transform: perspective(550px) rotateX(-22deg);
-                transform: perspective(550px) rotateX(-22deg);
-    }
-
-    80% {
-        -webkit-transform: perspective(550px) rotateX(11deg);
-                transform: perspective(550px) rotateX(11deg);
-    }
-    100% {
-        -webkit-transform-origin: top;
-            -ms-transform-origin: top;
-                transform-origin: top;
-        -webkit-transform:  perspective(550px)  rotateX(0);
-                transform:  perspective(550px)  rotateX(0);
-    }
-    `;
-    const X360 = (0, styled_components_1.keyframes) `
-   from {
-      -webkit-transform: rotateX(360deg);
-      transform: rotateX(360deg);
-   }
-   to {
-      -webkit-transform: rotateX(0deg);
-      transform: rotateX(0deg);
-   }`;
-    //////// Y360
-    const Y360 = (0, styled_components_1.keyframes) `
-    from {
-        -webkit-transform: rotateY(360deg);
-        transform: rotateY(360deg);
-    }
-    to {
-        -webkit-transform: rotateY(0deg);
-        transform: rotateY(0deg);
-    }`;
-    const fadeInkf = (0, styled_components_1.keyframes) `
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }`;
-    const wobY = (0, styled_components_1.keyframes) `
-    0% {
-        -webkit-transform: rotateY(${degreesLow}deg);
-        transform: rotateY(${degreesLow}deg);
-    }
-    50% {
-        -webkit-transform: rotateY(${degreesHi}deg);
-        transform: rotateY(${degreesHi}deg);
-    }
-    100% {
-        -webkit-transform: rotateY(${degreesLow}deg);
-        transform: rotateY(${degreesLow}deg);
-    }`;
-    const wobX = (0, styled_components_1.keyframes) `
-    0% {
-        -webkit-transform: rotateX(${degreesLow}deg);
-        transform: rotateX(${degreesLow}deg);
-    }
-    50% {
-        -webkit-transform: rotateX(${degreesHi}deg);
-        transform: rotateX(${degreesHi}deg);
-    }
-    100% {
-        -webkit-transform: rotateX(${degreesLow}deg);
-        transform: rotateX(${degreesLow}deg);
-    }`;
-    /* ============================== x-axis 0-180 >180 - 360 */
-    const fwdx018 = (0, styled_components_1.keyframes) `
-    from {
-        -webkit-transform: rotateX(360deg);
-        transform: rotateX(360deg);
-    }
-    to {
-        -webkit-transform: rotateX(180deg);
-        transform: rotateX(180deg);
-    }`;
-    const fwdx1836 = (0, styled_components_1.keyframes) `
-    from {
-        -webkit-transform: rotateX(180deg);
-        transform: rotateX(180deg);
-    }
-    to {
-        -webkit-transform: rotateX(0deg);
-        transform: rotateX(0deg);
-    }`;
-    /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
-    const fwdx09 = (0, styled_components_1.keyframes) `
-    from {
-       -webkit-transform: rotateX(0deg);
-       transform: rotateX(0deg);
-    }
-    to {
-       -webkit-transform: rotateX(90deg);
-       transform: rotateX(90deg);
-    }`;
-    const fwdx918 = (0, styled_components_1.keyframes) `
-    from {
-        -webkit-transform: rotateX(90deg);
-        transform: rotateX(90deg);
-    }
-    to {
-        -webkit-transform: rotateX(180deg);
-        transform: rotateX(180deg);
-    }`;
-    const fwdx1827 = (0, styled_components_1.keyframes) `
-    from {
-        -webkit-transform: rotateX(180deg);
-        transform: rotateX(180deg);
-    }
-    to {
-        -webkit-transform: rotateX(270deg);
-        transform: rotateX(270deg);
-    }`;
-    const fwdx2736 = (0, styled_components_1.keyframes) `
-    from {
-        -webkit-transform: rotateX(270deg);
-        transform: rotateX(270deg);
-    }
-    to {
-        -webkit-transform: rotateX(360deg);
-        transform: rotateX(360deg);
-    }`;
-    /* ============================== y-axis 0-180 >180 - 360 */
-    const fwdy018 = (0, styled_components_1.keyframes) `
-   from {
-       -webkit-transform: rotateY(0deg);
-       transform: rotateY(0deg);
-   }
-   to {
-       -webkit-transform: rotateY(180deg);
-       transform: rotateY(180deg);
-   }`;
-    const fwdy1836 = (0, styled_components_1.keyframes) `
-   from {
-       -webkit-transform: rotateY(180deg);
-       transform: rotateY(180deg);
-   }
-   to {
-       -webkit-transform: rotateY(0deg);
-       transform: rotateY(0deg);
-   }`;
-    /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
-    const fwdy09 = (0, styled_components_1.keyframes) `
-   from {
-      -webkit-transform: rotateY(0deg);
-      transform: rotateY(0deg);
-   }
-   to {
-      -webkit-transform: rotateY(90deg);
-      transform: rotateY(90deg);
-   }`;
-    const fwdy918 = (0, styled_components_1.keyframes) `
-   from {
-       -webkit-transform: rotateY(90deg);
-       transform: rotateY(90deg);
-   }
-   to {
-       -webkit-transform: rotateY(180deg);
-       transform: rotateY(180deg);
-   }`;
-    const fwdy1827 = (0, styled_components_1.keyframes) `
-   from {
-       -webkit-transform: rotateY(180deg);
-       transform: rotateY(180deg);
-   }
-   to {
-       -webkit-transform: rotateY(270deg);
-       transform: rotateY(270deg);
-   }`;
-    const fwdy2736 = (0, styled_components_1.keyframes) `
-   from {
-       -webkit-transform: rotateY(270deg);
-       transform: rotateY(270deg);
-   }
-   to {
-       -webkit-transform: rotateY(360deg);
-       transform: rotateY(360deg);
-   }`;
-    /* ============================= floating */
-    const floatX = (0, styled_components_1.keyframes) `
-   0% { -webkit-transform: translate(0,  0px); -ms-transform: translate(0,  0px); transform: translate(0,  0px); }
-   50%  { -webkit-transform: translate(0, 15px); -ms-transform: translate(0, 15px); transform: translate(0, 15px); }
-   100%   { -webkit-transform: translate(0, -0px); -ms-transform: translate(0, -0px); transform: translate(0, -0px); }`;
-    const floatShadow = (0, styled_components_1.keyframes) `
-        0% {
-            -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
-                    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
-            -webkit-transform: translateY(0px);
-                -ms-transform: translateY(0px);
-                    transform: translateY(0px);
-        }
-        50% {
-            -webkit-box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
-                    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
-            -webkit-transform: translateY(-20px);
-                -ms-transform: translateY(-20px);
-                    transform: translateY(-20px);
-        }
-        100% {
-            -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
-                    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
-            -webkit-transform: translateY(0px);
-                -ms-transform: translateY(0px);
-                    transform: translateY(0px);
-        }`;
-    const pulseSM = (0, styled_components_1.keyframes) `
-   0% {
-    -webkit-transform: scale(0.9);
-        -ms-transform: scale(0.9);
-            transform: scale(0.9);
-    }
-    70% {
-        -webkit-transform: scale(1);
-            -ms-transform: scale(1);
-                transform: scale(1);
-    }
-    100% {
-        -webkit-transform: scale(0.9);
-            -ms-transform: scale(0.9);
-                transform: scale(0.9);
-    }`;
-    const pulseMD = (0, styled_components_1.keyframes) `
-    0% {
-     -webkit-transform: scale(0.7);
-         -ms-transform: scale(0.7);
-             transform: scale(0.7);
-     }
-     70% {
-         -webkit-transform: scale(1);
-             -ms-transform: scale(1);
-                 transform: scale(1);
-     }
-     100% {
-         -webkit-transform: scale(0.7);
-             -ms-transform: scale(0.7);
-                 transform: scale(0.7);
-     }`;
-    const pulseLG = (0, styled_components_1.keyframes) `
-    0% {
-     -webkit-transform: scale(0.5);
-         -ms-transform: scale(0.5);
-             transform: scale(0.5);
-     }
-     70% {
-         -webkit-transform: scale(1);
-             -ms-transform: scale(1);
-                 transform: scale(1);
-     }
-     100% {
-         -webkit-transform: scale(0.5);
-             -ms-transform: scale(0.5);
-                 transform: scale(0.5);
-     }`;
-    const noAnim = (0, styled_components_1.keyframes) ``;
-    return {
-        X360,
-        Y360,
-        fadeInkf,
-        wobY,
-        wobX,
-        fwdx018,
-        fwdx1836,
-        fwdx09,
-        fwdx918,
-        fwdx1827,
-        fwdx2736,
-        fwdy018,
-        fwdy1836,
-        fwdy09,
-        fwdy918,
-        fwdy1827,
-        fwdy2736,
-        floatX,
-        floatShadow,
-        pulseSM,
-        pulseMD,
-        pulseLG,
-        swing,
-        swingDecay,
-        noAnim,
-    };
-};
-exports.allAnims = allAnims;

package/dist/cjs/components/styles/Global.d.ts

@@ -1,6 +0,0 @@
-interface ObjWrapperProps {
-    showCenterDiv?: boolean | string | number;
-    children?: any;
-}
-export declare const ObjWrapper: (props: ObjWrapperProps) => any;
-export {};

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

@@ -1,27 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjWrapper = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_1 = __importDefault(require("react"));
-const ObjWrapper = (props) => {
-    const { showCenterDiv = false, children = "" } = props;
-    const Wrapper = showCenterDiv
-        ? styled_components_1.default.section `
-        width: 100%;
-        height: 100%;
-        position: relative;
-        transform-style: preserve-3d;
-        border: 1px solid #0f0;
-      `
-        : styled_components_1.default.section `
-        width: 100%;
-        height: 100%;
-        position: relative;
-        transform-style: preserve-3d;
-      `;
-    return react_1.default.createElement(Wrapper, null, children);
-};
-exports.ObjWrapper = ObjWrapper;

package/dist/cjs/components/styles/Scene.d.ts

@@ -1,10 +0,0 @@
-interface SceneStyleProps {
-    width?: number | string;
-    height?: number | string;
-    perspective?: number | string | undefined;
-    perspectiveOrigin?: string | undefined;
-    zIndex?: number | undefined;
-    children: any;
-}
-export declare const SceneStyle: (props: SceneStyleProps) => JSX.Element;
-export {};

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

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SceneStyle = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_1 = __importDefault(require("react"));
-const SceneStyle = (props) => {
-    const { width = 0, height = 0, perspective = 600, perspectiveOrigin = "50% 50%", zIndex = 10, children = {}, } = props;
-    const SceneStyleDiv = styled_components_1.default.div `
-    width: ${width}px;
-    height: ${height}px;
-    -webkit-perspective: ${perspective}px;
-    perspective: ${perspective}px;
-    -webkit-perspective-origin: ${perspectiveOrigin};
-    perspective-origin: ${perspectiveOrigin};
-  `;
-    return (react_1.default.createElement("div", { style: { zIndex } },
-        react_1.default.createElement(SceneStyleDiv, null, children)));
-};
-exports.SceneStyle = SceneStyle;

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -1,17 +0,0 @@
-"use strict";
-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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);