@wise/art 2.7.0 → 2.8.1-beta.1

package/README.md

@@ -76,6 +76,53 @@ in Angular HTML template file
 </wise-illustration>
 ```
 
+## 3D Illustrations
+
+3D illustrations work via `Illustration3D` React component. The component uses [three.js](https://threejs.org) framework to preview 3D models.
+
+### Usage
+
+```js
+import { Illustration3D, Assets, Sizes } from '@wise/art';
+
+<Illustration3D name={Assets.LOCK} size={Sizes.LARGE} />
+```
+
+Note: this API requires React 18.
+
+Note: if your tests fail because of `matchMedia` and `ResizeObserver` being undefined you need add polyfills or mocks for Jest's jsdom env.
+
+<details>
+  <summary>Mocks</summary>
+
+```js
+// in jest.setup.js
+
+// mock matchMedia because it's not implemented in jsdoc lib
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// mock ResizeObserver because it's not implemented in jsdoc lib
+// https://github.com/jsdom/jsdom/issues/3368
+window.ResizeObserver = class ResizeObserver {
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+};
+```
+
+</details>
+
 ## Flags
 
 Flags generated from [wise-atoms SVGs](https://github.com/transferwise/wise-atoms/tree/main/flags) are accessible by either of these:

package/dist/CheckMark-6516e382.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var drei = require('@react-three/drei');
+var fiber = require('@react-three/fiber');
+var react = require('react');
+var three = require('three');
+var index = require('./index-c17944c0.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('clsx');
+
+const CheckMark = () => {
+  const modelRef = react.useRef();
+  const model = drei.useGLTF(index.defineSrc('check-mark.gltf'));
+  const {
+    animations,
+    scene
+  } = model;
+  const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('check-mark-light.json'));
+  const {
+    mixer,
+    clips
+  } = drei.useAnimations(animations, modelRef);
+  fiber.useFrame(() => {
+    model.materials['Standard'].map.offset.x += -0.0025;
+    mixer.clipAction(clips[0]).play().setLoop(three.LoopOnce, 1);
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
+      ref: modelRef,
+      scale: 1.4,
+      object: scene
+    }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+exports.default = CheckMark;
+//# sourceMappingURL=CheckMark-6516e382.js.map

package/dist/CheckMark-6516e382.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckMark-6516e382.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/CheckMark-7e2e6863.esm.js

@@ -0,0 +1,37 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useLoader, useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, LoopOnce } from 'three';
+import { d as defineSrc } from './index-3b6277fc.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'clsx';
+
+const CheckMark = () => {
+  const modelRef = useRef();
+  const model = useGLTF(defineSrc('check-mark.gltf'));
+  const {
+    animations,
+    scene
+  } = model;
+  const lights = useLoader(ObjectLoader, defineSrc('check-mark-light.json'));
+  const {
+    mixer,
+    clips
+  } = useAnimations(animations, modelRef);
+  useFrame(() => {
+    model.materials['Standard'].map.offset.x += -0.0025;
+    mixer.clipAction(clips[0]).play().setLoop(LoopOnce, 1);
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("primitive", {
+      ref: modelRef,
+      scale: 1.4,
+      object: scene
+    }), /*#__PURE__*/jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+export { CheckMark as default };
+//# sourceMappingURL=CheckMark-7e2e6863.esm.js.map

package/dist/CheckMark-7e2e6863.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckMark-7e2e6863.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Confetti-71f18588.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var drei = require('@react-three/drei');
+var fiber = require('@react-three/fiber');
+var react = require('react');
+var three = require('three');
+var index = require('./index-c17944c0.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('clsx');
+
+const Confetti = () => {
+  const ref = react.useRef();
+  const model = drei.useGLTF(index.defineSrc('confetti.gltf'));
+  const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('confetti-light.json'));
+  const {
+    mixer,
+    clips
+  } = drei.useAnimations(model.animations, ref);
+  fiber.useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.x += -0.0015;
+    mixer.clipAction(clips[0]).play().setLoop(three.LoopOnce, 1);
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
+      ref: ref,
+      scale: 1.5,
+      position: [0, 1.5, 0],
+      object: model.scene
+    }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+exports.default = Confetti;
+//# sourceMappingURL=Confetti-71f18588.js.map

package/dist/Confetti-71f18588.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti-71f18588.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Confetti-f1f0c4a5.esm.js

@@ -0,0 +1,34 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useLoader, useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, LoopOnce } from 'three';
+import { d as defineSrc } from './index-3b6277fc.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'clsx';
+
+const Confetti = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('confetti.gltf'));
+  const lights = useLoader(ObjectLoader, defineSrc('confetti-light.json'));
+  const {
+    mixer,
+    clips
+  } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.x += -0.0015;
+    mixer.clipAction(clips[0]).play().setLoop(LoopOnce, 1);
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("primitive", {
+      ref: ref,
+      scale: 1.5,
+      position: [0, 1.5, 0],
+      object: model.scene
+    }), /*#__PURE__*/jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+export { Confetti as default };
+//# sourceMappingURL=Confetti-f1f0c4a5.esm.js.map

package/dist/Confetti-f1f0c4a5.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti-f1f0c4a5.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Flower-2325e8ba.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var drei = require('@react-three/drei');
+var fiber = require('@react-three/fiber');
+var three = require('three');
+var index = require('./index-c17944c0.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('clsx');
+
+const Flower = () => {
+  const model = drei.useGLTF(index.defineSrc('flower.gltf'));
+  const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('flower-light.json'));
+  fiber.useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.x += -0.001;
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
+      scale: 1.3,
+      position: [0, -9, 0],
+      object: model.scene
+    }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+exports.default = Flower;
+//# sourceMappingURL=Flower-2325e8ba.js.map

package/dist/Flower-2325e8ba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flower-2325e8ba.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Flower-8a17d7a6.esm.js

@@ -0,0 +1,27 @@
+import { useGLTF } from '@react-three/drei';
+import { useLoader, useFrame } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+import { d as defineSrc } from './index-3b6277fc.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+
+const Flower = () => {
+  const model = useGLTF(defineSrc('flower.gltf'));
+  const lights = useLoader(ObjectLoader, defineSrc('flower-light.json'));
+  useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.x += -0.001;
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("primitive", {
+      scale: 1.3,
+      position: [0, -9, 0],
+      object: model.scene
+    }), /*#__PURE__*/jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+export { Flower as default };
+//# sourceMappingURL=Flower-8a17d7a6.esm.js.map

package/dist/Flower-8a17d7a6.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flower-8a17d7a6.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Globe-601b1eb5.esm.js

@@ -0,0 +1,43 @@
+import { useGLTF } from '@react-three/drei';
+import { useLoader, useFrame } from '@react-three/fiber';
+import { ObjectLoader, TextureLoader } from 'three';
+import { d as defineSrc } from './index-3b6277fc.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+
+const Globe = () => {
+  const {
+    scene
+  } = useGLTF(defineSrc('globe.gltf'));
+  const lights = useLoader(ObjectLoader, defineSrc('globe-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
+  const planet = scene.getObjectByName('Globe');
+  const orbit = scene.getObjectByName('Coins_Axis_Rotation_Animate');
+  scene.traverse(child => {
+    if (child.name.startsWith('Coin_')) {
+      const mesh = child;
+      const material = mesh.material;
+      material.bumpMap = wiseLogo;
+      material.bumpMap.flipY = false;
+      mesh.castShadow = false;
+      mesh.receiveShadow = false;
+    }
+  });
+  useFrame(() => {
+    orbit.rotation.y += 0.002;
+    planet.material.map.offset.x += -0.0002;
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("primitive", {
+      position: [0, -10, 0],
+      scale: 1.3,
+      object: scene
+    }), /*#__PURE__*/jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+export { Globe as default };
+//# sourceMappingURL=Globe-601b1eb5.esm.js.map

package/dist/Globe-601b1eb5.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Globe-601b1eb5.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Globe-93237bd2.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var drei = require('@react-three/drei');
+var fiber = require('@react-three/fiber');
+var three = require('three');
+var index = require('./index-c17944c0.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('clsx');
+
+const Globe = () => {
+  const {
+    scene
+  } = drei.useGLTF(index.defineSrc('globe.gltf'));
+  const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('globe-light.json'));
+  const wiseLogo = fiber.useLoader(three.TextureLoader, index.defineSrc('wise-flag-map-bump.jpg'));
+  const planet = scene.getObjectByName('Globe');
+  const orbit = scene.getObjectByName('Coins_Axis_Rotation_Animate');
+  scene.traverse(child => {
+    if (child.name.startsWith('Coin_')) {
+      const mesh = child;
+      const material = mesh.material;
+      material.bumpMap = wiseLogo;
+      material.bumpMap.flipY = false;
+      mesh.castShadow = false;
+      mesh.receiveShadow = false;
+    }
+  });
+  fiber.useFrame(() => {
+    orbit.rotation.y += 0.002;
+    planet.material.map.offset.x += -0.0002;
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
+      position: [0, -10, 0],
+      scale: 1.3,
+      object: scene
+    }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+exports.default = Globe;
+//# sourceMappingURL=Globe-93237bd2.js.map

package/dist/Globe-93237bd2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Globe-93237bd2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Graph-536a6847.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var drei = require('@react-three/drei');
+var fiber = require('@react-three/fiber');
+var three = require('three');
+var index = require('./index-c17944c0.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+require('clsx');
+
+const Graph = () => {
+  const model = drei.useGLTF(index.defineSrc(`graph.gltf`));
+  const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('graph-light.json'));
+  fiber.useFrame(() => {
+    const {
+      offset
+    } = model.materials['Standard '].map;
+    offset.x += -0.0015;
+    offset.y += 0.0015;
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
+      scale: 1.3,
+      position: [0, -10, 0],
+      object: model.scene
+    }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+exports.default = Graph;
+//# sourceMappingURL=Graph-536a6847.js.map

package/dist/Graph-536a6847.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graph-536a6847.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Graph-e766a791.esm.js

@@ -0,0 +1,31 @@
+import { useGLTF } from '@react-three/drei';
+import { useLoader, useFrame } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+import { d as defineSrc } from './index-3b6277fc.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+
+const Graph = () => {
+  const model = useGLTF(defineSrc(`graph.gltf`));
+  const lights = useLoader(ObjectLoader, defineSrc('graph-light.json'));
+  useFrame(() => {
+    const {
+      offset
+    } = model.materials['Standard '].map;
+    offset.x += -0.0015;
+    offset.y += 0.0015;
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("primitive", {
+      scale: 1.3,
+      position: [0, -10, 0],
+      object: model.scene
+    }), /*#__PURE__*/jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+export { Graph as default };
+//# sourceMappingURL=Graph-e766a791.esm.js.map

package/dist/Graph-e766a791.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graph-e766a791.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Illustration.css

@@ -6,3 +6,22 @@ img.wds-illustration {
 .wds-illustration-padding {
   padding: 24px;
 }
+
+.wds-illustration-3d {
+  display: inline-flex;
+}
+
+.wds-illustration-3d-small {
+  width: 200px;
+  height: 200px;
+}
+
+.wds-illustration-3d-medium {
+  width: 300px;
+  height: 300px;
+}
+
+.wds-illustration-3d-large {
+  width: 500px;
+  height: 500px;
+}

package/dist/Jars-9afb6e8b.esm.js

@@ -0,0 +1,50 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useLoader, useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, TextureLoader } from 'three';
+import { d as defineSrc } from './index-3b6277fc.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'clsx';
+
+const Jars = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('jars.gltf'));
+  const lights = useLoader(ObjectLoader, defineSrc('jars-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
+  const jars = [];
+  model.scene.traverse(child => {
+    if (child.name.startsWith('Coin_')) {
+      child.material.bumpMap = wiseLogo;
+      child.material.bumpMap.flipY = false;
+      child.castShadow = false;
+      child.receiveShadow = false;
+    }
+    if (child.name.startsWith('Jar_')) {
+      jars.push(child);
+    }
+  });
+  const {
+    mixer,
+    clips
+  } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    mixer.clipAction(clips[0]).play();
+    jars.forEach(jar => {
+      jar.material.map.offset.x += 0.001;
+      jar.material.map.offset.y += 0.0;
+    });
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("primitive", {
+      ref: ref,
+      scale: 1.3,
+      position: [0, -10, 0],
+      object: model.scene
+    }), /*#__PURE__*/jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+export { Jars as default };
+//# sourceMappingURL=Jars-9afb6e8b.esm.js.map

package/dist/Jars-9afb6e8b.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Jars-9afb6e8b.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Jars-fcb1e2b1.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var drei = require('@react-three/drei');
+var fiber = require('@react-three/fiber');
+var react = require('react');
+var three = require('three');
+var index = require('./index-c17944c0.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('clsx');
+
+const Jars = () => {
+  const ref = react.useRef();
+  const model = drei.useGLTF(index.defineSrc('jars.gltf'));
+  const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('jars-light.json'));
+  const wiseLogo = fiber.useLoader(three.TextureLoader, index.defineSrc('wise-flag-map-bump.jpg'));
+  const jars = [];
+  model.scene.traverse(child => {
+    if (child.name.startsWith('Coin_')) {
+      child.material.bumpMap = wiseLogo;
+      child.material.bumpMap.flipY = false;
+      child.castShadow = false;
+      child.receiveShadow = false;
+    }
+    if (child.name.startsWith('Jar_')) {
+      jars.push(child);
+    }
+  });
+  const {
+    mixer,
+    clips
+  } = drei.useAnimations(model.animations, ref);
+  fiber.useFrame(() => {
+    mixer.clipAction(clips[0]).play();
+    jars.forEach(jar => {
+      jar.material.map.offset.x += 0.001;
+      jar.material.map.offset.y += 0.0;
+    });
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
+      ref: ref,
+      scale: 1.3,
+      position: [0, -10, 0],
+      object: model.scene
+    }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+exports.default = Jars;
+//# sourceMappingURL=Jars-fcb1e2b1.js.map

package/dist/Jars-fcb1e2b1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Jars-fcb1e2b1.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Lock-2365c3f9.esm.js

@@ -0,0 +1,41 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useLoader, useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, LoopOnce } from 'three';
+import { d as defineSrc } from './index-3b6277fc.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'clsx';
+
+const Lock = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('lock.gltf'));
+  const lights = useLoader(ObjectLoader, defineSrc('lock-light.json'));
+  model.scene.traverse(node => {
+    if (node.isMesh) {
+      node.castShadow = true;
+      node.receiveShadow = true;
+    }
+  });
+  const {
+    clips,
+    mixer
+  } = useAnimations(model.animations, ref);
+  let frame = 0;
+  useFrame(() => {
+    mixer.clipAction(clips[0]).play().setLoop(LoopOnce, 1);
+    model.scene.position.y = Math.sin(frame++ * 0.04) * 0.2;
+    model.materials.Standard.map.offset.x += -0.001;
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("primitive", {
+      ref: ref,
+      scale: 1.4,
+      object: model.scene
+    }), /*#__PURE__*/jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+export { Lock as default };
+//# sourceMappingURL=Lock-2365c3f9.esm.js.map

package/dist/Lock-2365c3f9.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lock-2365c3f9.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Lock-e5c89aa2.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var drei = require('@react-three/drei');
+var fiber = require('@react-three/fiber');
+var react = require('react');
+var three = require('three');
+var index = require('./index-c17944c0.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('clsx');
+
+const Lock = () => {
+  const ref = react.useRef();
+  const model = drei.useGLTF(index.defineSrc('lock.gltf'));
+  const lights = fiber.useLoader(three.ObjectLoader, index.defineSrc('lock-light.json'));
+  model.scene.traverse(node => {
+    if (node.isMesh) {
+      node.castShadow = true;
+      node.receiveShadow = true;
+    }
+  });
+  const {
+    clips,
+    mixer
+  } = drei.useAnimations(model.animations, ref);
+  let frame = 0;
+  fiber.useFrame(() => {
+    mixer.clipAction(clips[0]).play().setLoop(three.LoopOnce, 1);
+    model.scene.position.y = Math.sin(frame++ * 0.04) * 0.2;
+    model.materials.Standard.map.offset.x += -0.001;
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("primitive", {
+      ref: ref,
+      scale: 1.4,
+      object: model.scene
+    }), /*#__PURE__*/jsxRuntime.jsx("primitive", {
+      object: lights
+    })]
+  });
+};
+
+exports.default = Lock;
+//# sourceMappingURL=Lock-e5c89aa2.js.map