@inglorious/logo 1.0.0

package/dist/faces/T.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+
+  <path id="letter" d="
+    M 0 0
+    L 6 0
+    L 6 2
+    L 4 1
+    L 4 5
+    L 6 6
+    L 0 6
+    L 2 5
+    L 2 1
+    L 0 2
+    Z
+  " />
+</svg>

package/dist/faces/U.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 2 4
+    L 4 4
+    L 4 0
+    L 6 0
+    L 6 6
+    L 0 6
+    Z
+  " />
+</svg>

package/dist/faces/V.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 3 4
+    L 4 0
+    L 6 0
+    L 4 6
+    L 2 6
+    Z
+  " />
+</svg>

package/dist/faces/W.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+  
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 2 3
+    L 3 1
+    L 4 3
+    L 4 0
+    L 6 0
+    L 6 6
+    L 4 6
+    L 3 4
+    L 2 6
+    L 0 6
+    Z
+  " />
+</svg>

package/dist/faces/X.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+  
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 3 2
+    L 4 0
+    L 6 0
+    L 4 3
+    L 6 6
+    L 4 6
+    L 3 4
+    L 2 6
+    L 0 6
+    L 2 3
+    Z
+  " />
+</svg>

package/dist/faces/Y.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+  
+  <path id="letter" d="
+    M 0 0
+    L 2 0
+    L 3 2
+    L 4 0
+    L 6 0
+    L 4 3
+    L 4 6
+    L 2 6
+    L 2 3
+    Z
+  " />
+</svg>

package/dist/faces/Z.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6">
+  <style>
+    #letter {
+      fill: rgb(127, 127, 255);
+      fill-opacity: 0.5;
+      stroke: rgb(127, 127, 192);
+      stroke-width: 0.25;
+      stroke-opacity: 0.5;
+    }
+  </style>
+  
+  <path id="letter" d="
+    M 0 0
+    L 6 0
+    L 6 1
+    L 2 5
+    L 4 5
+    L 6 4
+    L 6 6
+    L 0 6
+    L 0 5
+    L 4 1
+    L 2 1
+    L 0 2
+    Z
+  " />
+</svg>

package/dist/faces/index.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "A", {
+  enumerable: true,
+  get: function get() {
+    return _A["default"];
+  }
+});
+Object.defineProperty(exports, "B", {
+  enumerable: true,
+  get: function get() {
+    return _B["default"];
+  }
+});
+Object.defineProperty(exports, "C", {
+  enumerable: true,
+  get: function get() {
+    return _C["default"];
+  }
+});
+Object.defineProperty(exports, "D", {
+  enumerable: true,
+  get: function get() {
+    return _D["default"];
+  }
+});
+Object.defineProperty(exports, "E", {
+  enumerable: true,
+  get: function get() {
+    return _E["default"];
+  }
+});
+Object.defineProperty(exports, "F", {
+  enumerable: true,
+  get: function get() {
+    return _F["default"];
+  }
+});
+Object.defineProperty(exports, "G", {
+  enumerable: true,
+  get: function get() {
+    return _G["default"];
+  }
+});
+Object.defineProperty(exports, "H", {
+  enumerable: true,
+  get: function get() {
+    return _H["default"];
+  }
+});
+Object.defineProperty(exports, "I", {
+  enumerable: true,
+  get: function get() {
+    return _I["default"];
+  }
+});
+Object.defineProperty(exports, "J", {
+  enumerable: true,
+  get: function get() {
+    return _J["default"];
+  }
+});
+Object.defineProperty(exports, "K", {
+  enumerable: true,
+  get: function get() {
+    return _K["default"];
+  }
+});
+Object.defineProperty(exports, "L", {
+  enumerable: true,
+  get: function get() {
+    return _L["default"];
+  }
+});
+Object.defineProperty(exports, "M", {
+  enumerable: true,
+  get: function get() {
+    return _M["default"];
+  }
+});
+Object.defineProperty(exports, "N", {
+  enumerable: true,
+  get: function get() {
+    return _N["default"];
+  }
+});
+Object.defineProperty(exports, "O", {
+  enumerable: true,
+  get: function get() {
+    return _O["default"];
+  }
+});
+Object.defineProperty(exports, "P", {
+  enumerable: true,
+  get: function get() {
+    return _P["default"];
+  }
+});
+Object.defineProperty(exports, "Q", {
+  enumerable: true,
+  get: function get() {
+    return _Q["default"];
+  }
+});
+Object.defineProperty(exports, "R", {
+  enumerable: true,
+  get: function get() {
+    return _R["default"];
+  }
+});
+Object.defineProperty(exports, "S", {
+  enumerable: true,
+  get: function get() {
+    return _S["default"];
+  }
+});
+Object.defineProperty(exports, "T", {
+  enumerable: true,
+  get: function get() {
+    return _T["default"];
+  }
+});
+Object.defineProperty(exports, "U", {
+  enumerable: true,
+  get: function get() {
+    return _U["default"];
+  }
+});
+Object.defineProperty(exports, "V", {
+  enumerable: true,
+  get: function get() {
+    return _V["default"];
+  }
+});
+Object.defineProperty(exports, "W", {
+  enumerable: true,
+  get: function get() {
+    return _W["default"];
+  }
+});
+Object.defineProperty(exports, "X", {
+  enumerable: true,
+  get: function get() {
+    return _X["default"];
+  }
+});
+Object.defineProperty(exports, "Y", {
+  enumerable: true,
+  get: function get() {
+    return _Y["default"];
+  }
+});
+Object.defineProperty(exports, "Z", {
+  enumerable: true,
+  get: function get() {
+    return _Z["default"];
+  }
+});
+var _A = _interopRequireDefault(require("./A.svg"));
+var _B = _interopRequireDefault(require("./B.svg"));
+var _C = _interopRequireDefault(require("./C.svg"));
+var _D = _interopRequireDefault(require("./D.svg"));
+var _E = _interopRequireDefault(require("./E.svg"));
+var _F = _interopRequireDefault(require("./F.svg"));
+var _G = _interopRequireDefault(require("./G.svg"));
+var _H = _interopRequireDefault(require("./H.svg"));
+var _I = _interopRequireDefault(require("./I.svg"));
+var _J = _interopRequireDefault(require("./J.svg"));
+var _K = _interopRequireDefault(require("./K.svg"));
+var _L = _interopRequireDefault(require("./L.svg"));
+var _M = _interopRequireDefault(require("./M.svg"));
+var _N = _interopRequireDefault(require("./N.svg"));
+var _O = _interopRequireDefault(require("./O.svg"));
+var _P = _interopRequireDefault(require("./P.svg"));
+var _Q = _interopRequireDefault(require("./Q.svg"));
+var _R = _interopRequireDefault(require("./R.svg"));
+var _S = _interopRequireDefault(require("./S.svg"));
+var _T = _interopRequireDefault(require("./T.svg"));
+var _U = _interopRequireDefault(require("./U.svg"));
+var _V = _interopRequireDefault(require("./V.svg"));
+var _W = _interopRequireDefault(require("./W.svg"));
+var _X = _interopRequireDefault(require("./X.svg"));
+var _Y = _interopRequireDefault(require("./Y.svg"));
+var _Z = _interopRequireDefault(require("./Z.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/index.js

@@ -0,0 +1,138 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _logo = _interopRequireDefault(require("./logo"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var MAX_HEAD_TILT_X = 400;
+var MAX_HEAD_TILT_Y = 400;
+var HALF = 0.5;
+var FIRST_ITEM = 0;
+var Logo = /*#__PURE__*/(0, _react.memo)(function Logo(_ref) {
+  var size = _ref.size,
+    faces = _ref.faces,
+    isInteractive = _ref.isInteractive,
+    preventScroll = _ref.preventScroll;
+  var _useState = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    coords = _useState2[0],
+    setCoords = _useState2[1];
+  var logo = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (!isInteractive) {
+      return;
+    }
+    var _logo$current$getBoun = logo.current.getBoundingClientRect(),
+      left = _logo$current$getBoun.left,
+      top = _logo$current$getBoun.top,
+      width = _logo$current$getBoun.width,
+      height = _logo$current$getBoun.height;
+    var center = {
+      x: window.scrollX + left + width * HALF,
+      y: window.scrollY + top + height * HALF
+    };
+    var moveEvent = isTouchDevice() ? "touchmove" : "mousemove";
+    document.addEventListener(moveEvent, onMove, {
+      passive: !preventScroll
+    });
+    return function () {
+      document.removeEventListener(moveEvent, onMove);
+    };
+    function onMove(event) {
+      var _ref2 = moveEvent.current === "touchmove" ? event.touches[FIRST_ITEM] : event,
+        target = _ref2.target,
+        pageX = _ref2.pageX,
+        pageY = _ref2.pageY;
+      if (preventScroll && closestAncestor(target, "logo")) {
+        event.preventDefault();
+      }
+      setCoords({
+        x: saturate(pageX - center.x, MAX_HEAD_TILT_X),
+        y: saturate(pageY - center.y, MAX_HEAD_TILT_Y)
+      });
+    }
+  }, [isInteractive, preventScroll]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_logo["default"], _objectSpread(_objectSpread({
+    size: size,
+    faces: faces
+  }, coords), {}, {
+    ref: logo
+  }));
+});
+Logo.propTypes = {
+  size: _propTypes["default"].number.isRequired,
+  faces: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    image: _propTypes["default"].oneOf(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]),
+    reverse: _propTypes["default"].bool,
+    eye: _propTypes["default"].bool
+  }).isRequired).isRequired,
+  isInteractive: _propTypes["default"].bool.isRequired,
+  preventScroll: _propTypes["default"].bool.isRequired
+};
+Logo.defaultProps = {
+  size: 64,
+  faces: [{
+    image: "I",
+    reverse: false,
+    eye: true
+  }, {
+    image: "C",
+    reverse: false,
+    eye: false
+  }],
+  isInteractive: false,
+  preventScroll: false
+};
+var _default = exports["default"] = Logo;
+function isTouchDevice() {
+  if ("ontouchstart" in window || window.DocumentTouch && document instanceof window.DocumentTouch) {
+    return true;
+  }
+
+  // include the 'heartz' as a way to have a non matching mediaQuery to help terminate the join
+  // https://git.io/vznFH
+  var prefixes = " -webkit- -moz- -o- -ms- ".split(" ");
+  var query = ["(", prefixes.join("touch-enabled),("), "heartz", ")"].join("");
+  return window.matchMedia(query).matches;
+}
+function saturate(num, limit) {
+  if (num < -limit) return -limit;
+  if (num > limit) return limit;
+  return num;
+}
+function closestAncestor(el, className) {
+  var limit = 4;
+  var i = 0;
+  var closest = el;
+  while (closest && i < limit) {
+    if (closest.className == null || typeof closest.className.split !== "function") {
+      return null;
+    }
+    var classes = closest.className.split(" ");
+    if (classes.includes(className)) {
+      return closest;
+    }
+    closest = closest.parentNode;
+    i++;
+  }
+}

package/dist/logo.js

@@ -0,0 +1,95 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _eye = _interopRequireDefault(require("./eye.svg"));
+var faceSvgs = _interopRequireWildcard(require("./faces"));
+var _logoModule = _interopRequireDefault(require("./logo.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var MINUS_FORTY_DEGREES = -0.6981;
+var MINUS_FORTY_FIVE_DEGREES = -0.7854;
+var STEP = 0.001;
+var HALF = 0.5;
+var Logo = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Logo(_ref, ref) {
+  var size = _ref.size,
+    faces = _ref.faces,
+    x = _ref.x,
+    y = _ref.y;
+  var _faces = _slicedToArray(faces, 2),
+    left = _faces[0],
+    right = _faces[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: _logoModule["default"].logo,
+    ref: ref,
+    style: {
+      "--size": "".concat(size, "px"),
+      "--transform": "scaleY(1.2) translateZ(-".concat(size, "px) rotateX(").concat(MINUS_FORTY_DEGREES - STEP * y, "rad)\n          rotateY(").concat(MINUS_FORTY_FIVE_DEGREES + STEP * x, "rad)"),
+      "--z-translation": "".concat(size * HALF, "px"),
+      "--left-face-flip": left.reverse ? "rotateY(180deg);" : "none",
+      "--right-face-flip": right.reverse ? "rotateY(180deg);" : "none"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _logoModule["default"].cube,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "".concat(_logoModule["default"].face, " ").concat(_logoModule["default"].left),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: faceSvgs[left.image],
+          alt: left.image
+        }), left.eye && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: _logoModule["default"].eye,
+          src: _eye["default"],
+          alt: "left eye"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "".concat(_logoModule["default"].face, " ").concat(_logoModule["default"].right),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: faceSvgs[right.image],
+          alt: right.image
+        }), right.eye && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: _logoModule["default"].eye,
+          src: _eye["default"],
+          alt: "right eye"
+        })]
+      })]
+    })
+  });
+}));
+Logo.propTypes = {
+  size: _propTypes["default"].number.isRequired,
+  faces: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    image: _propTypes["default"].oneOf(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]),
+    reverse: _propTypes["default"].bool,
+    eye: _propTypes["default"].bool
+  })).isRequired,
+  x: _propTypes["default"].number.isRequired,
+  y: _propTypes["default"].number.isRequired
+};
+Logo.defaultProps = {
+  size: 64,
+  faces: [{
+    image: "I",
+    reverse: false,
+    eye: true
+  }, {
+    image: "C",
+    reverse: false,
+    eye: false
+  }],
+  x: 0,
+  y: 0
+};
+var _default = exports["default"] = Logo;

package/dist/logo.module.css

@@ -0,0 +1,43 @@
+.logo {
+  width: var(--size);
+  perspective: var(--size);
+  margin: 0 auto;
+}
+
+.cube {
+  height: var(--size);
+  transform-style: preserve-3d;
+  transform: var(--transform);
+  transition: ease-out 0.2s;
+}
+
+.face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-origin: bottom center;
+}
+
+.face > img {
+  position: absolute;
+}
+
+.left {
+  transform: rotateY(0deg) translateZ(var(--z-translation)) skew(12deg);
+}
+
+.right {
+  transform: rotateY(90deg) translateZ(var(--z-translation)) skew(-12deg);
+}
+
+.right > .eye {
+  transform: rotateY(180deg);
+}
+
+.left > img:first-of-type {
+  transform: var(--left-face-flip);
+}
+
+.right > img:first-of-type {
+  transform: var(--right-face-flip);
+}