@terraware/web-components 4.2.12 → 4.2.14-rc.0

package/components/VirtualWalkthrough/walkthrough-camera.js

@@ -0,0 +1,320 @@
+import { Quat, Script, Vec3, math } from 'playcanvas';
+import { computeGroundPlane, yOnPlane } from './groundPlane';
+
+/**
+ * First-person walkthrough camera for Gaussian Splat scenes.
+ *
+ * - Pointer drag (mouse or touch) rotates the camera (pitch + yaw) with damping
+ *   matching PlayCanvas CameraControls' rotateDamping=0.98.
+ * - WASD / arrow keys move along the XZ plane using yaw-only direction, so
+ *   movement is always horizontal regardless of where the camera is pointing.
+ * - Mouse wheel moves forward/backward along the XZ plane.
+ * - Y position is clamped between boundsMin.y and boundsMax.y; set them equal
+ *   to lock vertical position entirely.
+ * - Exposes reset() and focusPoint to stay compatible with useCameraPosition.
+ */
+
+const _quat = new Quat();
+const _flatForward = new Vec3();
+const _flatRight = new Vec3();
+
+/** Frame-rate-independent damping lerp rate — matches PlayCanvas CameraControls. */
+const dampRate = (damping, dt) => 1 - Math.pow(damping, dt * 1000);
+
+/** Below this angular delta (degrees) the damped lerp snaps to its target and stops writing. */
+const ANGLE_EPSILON = 1e-3;
+
+/** Below this positional delta (world units) an idle frame skips the transform write. */
+const POSITION_EPSILON = 1e-5;
+export class WalkthroughCamera extends Script {
+  static scriptName = 'walkthroughCamera';
+
+  /** @attribute */
+  moveSpeed = 0.3;
+
+  /** @attribute */
+  moveFastSpeed = 0.5;
+
+  /** @attribute */
+  moveSlowSpeed = 0.15;
+
+  /** @attribute */
+  lookSensitivity = 0.1;
+
+  /** @attribute */
+  rotateDamping = 0.98;
+
+  /** @attribute */
+  pitchMin = -85;
+
+  /** @attribute */
+  pitchMax = 85;
+
+  /** @attribute */
+  scrollSpeed = 0.001;
+
+  /** @attribute */
+  boundsCenter = new Vec3(0, 0, 0);
+
+  /** @attribute */
+  boundsRadius = 10;
+
+  /** @attribute */
+  freeFly = false;
+
+  /** @attribute */
+  enableFly = true;
+
+  /** @attribute */
+  averageCameraHeight = 0;
+
+  /**
+   * Three world-space points defining the ground plane.
+   * When provided, the camera Y position is derived from this plane during non-freeFly movement.
+   *
+   * Not a React prop — must be set directly on the script instance via useEffect. The @playcanvas/react
+   * Script component is wrapped in memo() whose shallowEquals comparator returns early on the first prop
+   * with a .equals() method (Vec3), so any prop listed after boundsCenter is never compared and the
+   * component won't re-render when it changes. Set via:
+   *   app.root.findByName('camera')?.script?.walkthroughCamera.groundPlane = points
+   * Should be updated if shallowEquals is fixed (see https://github.com/playcanvas/react/pull/298)
+   */
+  groundPlane = [];
+
+  // Current (damped) angles applied to the entity each frame.
+  _pitch = 0;
+  _yaw = 0;
+
+  // Target angles — updated immediately on pointer move, entity lerps toward them.
+  _targetPitch = 0;
+  _targetYaw = 0;
+  _isDragging = false;
+  _lastX = 0;
+  _lastY = 0;
+  _scrollDelta = 0;
+  _keys = {};
+  _removeListeners = [];
+
+  // Cached plane derived from groundPlane attribute. Computed once when 3 points become available.
+  _planeNormal = new Vec3(0, 1, 0);
+  _planePoint = new Vec3(0, 0, 0);
+  _hasGroundPlane = false;
+  _syncGroundPlane() {
+    if (this._hasGroundPlane || this.groundPlane.length < 3) {
+      return;
+    }
+    const plane = computeGroundPlane(this.groundPlane);
+    if (!plane) {
+      return;
+    }
+    this._planeNormal.copy(plane.normal);
+    this._planePoint.copy(plane.point);
+    this._hasGroundPlane = true;
+  }
+  initialize() {
+    // Start horizontal; reset() will set the correct pose once splat data loads.
+    this._pitch = 0;
+    this._yaw = 0;
+    this._targetPitch = 0;
+    this._targetYaw = 0;
+    const canvas = this.app.graphicsDevice.canvas;
+    const onPointerDown = e => {
+      this._isDragging = true;
+      this._lastX = e.clientX;
+      this._lastY = e.clientY;
+      try {
+        canvas.setPointerCapture(e.pointerId);
+      } catch {
+        // ignore — canvas may not be focusable yet
+      }
+    };
+    const onPointerMove = e => {
+      if (!this._isDragging) {
+        return;
+      }
+      const dx = e.clientX - this._lastX;
+      const dy = e.clientY - this._lastY;
+      this._lastX = e.clientX;
+      this._lastY = e.clientY;
+      this._targetYaw -= dx * this.lookSensitivity;
+      this._targetPitch = math.clamp(this._targetPitch - dy * this.lookSensitivity, this.pitchMin, this.pitchMax);
+    };
+    const onPointerUp = e => {
+      this._isDragging = false;
+      try {
+        canvas.releasePointerCapture(e.pointerId);
+      } catch {
+        // ignore
+      }
+    };
+    const onWheel = e => {
+      e.preventDefault();
+      this._scrollDelta += e.deltaY;
+    };
+    const onContextMenu = e => e.preventDefault();
+    const onKeyDown = e => {
+      this._keys[e.code] = true;
+    };
+    const onKeyUp = e => {
+      this._keys[e.code] = false;
+    };
+    const onBlur = () => {
+      this._keys = {};
+      this._isDragging = false;
+    };
+    canvas.addEventListener('pointerdown', onPointerDown);
+    canvas.addEventListener('pointermove', onPointerMove);
+    canvas.addEventListener('pointerup', onPointerUp);
+    canvas.addEventListener('pointercancel', onPointerUp);
+    canvas.addEventListener('wheel', onWheel, {
+      passive: false
+    });
+    canvas.addEventListener('contextmenu', onContextMenu);
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    window.addEventListener('blur', onBlur);
+    this._removeListeners = [() => canvas.removeEventListener('pointerdown', onPointerDown), () => canvas.removeEventListener('pointermove', onPointerMove), () => canvas.removeEventListener('pointerup', onPointerUp), () => canvas.removeEventListener('pointercancel', onPointerUp), () => canvas.removeEventListener('wheel', onWheel), () => canvas.removeEventListener('contextmenu', onContextMenu), () => window.removeEventListener('keydown', onKeyDown), () => window.removeEventListener('keyup', onKeyUp), () => window.removeEventListener('blur', onBlur)];
+  }
+
+  /**
+   * Position the camera at `position` looking toward `focus`.
+   * Compatible with the useCameraPosition hook's reset() call.
+   */
+  reset(focus, position) {
+    this.entity.setPosition(position);
+    const dx = focus.x - position.x;
+    const dy = focus.y - position.y;
+    const dz = focus.z - position.z;
+    const len = Math.sqrt(dx * dx + dy * dy + dz * dz);
+    if (len > 0) {
+      // PlayCanvas uses right-handed CCW Y rotation: forward = (-sinθ, 0, -cosθ),
+      // so to look toward (dx, 0, dz): θ = atan2(-dx, -dz).
+      this._yaw = Math.atan2(-dx, -dz) * (180 / Math.PI);
+      this._pitch = Math.atan2(-dy, Math.sqrt(dx * dx + dz * dz)) * (180 / Math.PI);
+      this._pitch = math.clamp(this._pitch, this.pitchMin, this.pitchMax);
+    }
+
+    // Snap targets so there's no damped drift from the previous pose.
+    this._targetPitch = this._pitch;
+    this._targetYaw = this._yaw;
+    this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+  }
+  get currentYaw() {
+    return this._targetYaw;
+  }
+  get currentPitch() {
+    return this._targetPitch;
+  }
+
+  /**
+   * Orbit the camera by `yawDelta` degrees around `boundsCenter`.
+   * Called by AutoRotator
+   */
+  orbitStep(yawDelta) {
+    this._syncGroundPlane();
+    const pos = this.entity.getPosition();
+    const dx = pos.x - this.boundsCenter.x;
+    const dz = pos.z - this.boundsCenter.z;
+    const radius = Math.sqrt(dx * dx + dz * dz) || this.boundsRadius * 0.5;
+    const currentAngle = Math.atan2(dz, dx);
+    const newAngle = currentAngle + yawDelta * Math.PI / 180;
+    const nx = this.boundsCenter.x + radius * Math.cos(newAngle);
+    const nz = this.boundsCenter.z + radius * Math.sin(newAngle);
+    const ny = this._hasGroundPlane ? yOnPlane(nx, nz, this._planeNormal, this._planePoint, this.boundsCenter.y) + this.averageCameraHeight : this.boundsCenter.y;
+    this.entity.setPosition(nx, ny, nz);
+    const faceDx = this.boundsCenter.x - nx;
+    const faceDz = this.boundsCenter.z - nz;
+    this._yaw = Math.atan2(-faceDx, -faceDz) * (180 / Math.PI);
+    this._targetYaw = this._yaw;
+    this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+  }
+
+  /**
+   * Returns the point directly in front of the camera.
+   * Compatible with the useCameraPosition hook's focusPoint read.
+   */
+  get focusPoint() {
+    const pos = this.entity.getPosition();
+    _quat.setFromEulerAngles(this._pitch, this._yaw, 0);
+    _quat.transformVector(Vec3.FORWARD, _flatForward);
+    return new Vec3(pos.x + _flatForward.x, pos.y + _flatForward.y, pos.z + _flatForward.z);
+  }
+  update(dt) {
+    this._syncGroundPlane();
+
+    // Lerp current angles toward targets using the same damping as CameraControls.
+    // Snap to the target once within ANGLE_EPSILON so the asymptotic lerp actually
+    // settles instead of emitting ever-smaller micro-rotations for ~0.4s after each
+    // drag. The gsplat sorter guards its own re-sorts with an epsilon, so this mainly
+    // trims that sort tail; it does not affect per-frame rendering (autoRender does).
+    const r = dampRate(this.rotateDamping, dt);
+    let nextPitch = this._pitch + (this._targetPitch - this._pitch) * r;
+    let nextYaw = this._yaw + (this._targetYaw - this._yaw) * r;
+    if (Math.abs(this._targetPitch - nextPitch) < ANGLE_EPSILON) {
+      nextPitch = this._targetPitch;
+    }
+    if (Math.abs(this._targetYaw - nextYaw) < ANGLE_EPSILON) {
+      nextYaw = this._targetYaw;
+    }
+    nextPitch = math.clamp(nextPitch, this.pitchMin, this.pitchMax);
+
+    // Only write the rotation when it actually changed, to avoid needlessly dirtying
+    // the scene node once the angles have settled.
+    const anglesChanged = nextPitch !== this._pitch || nextYaw !== this._yaw;
+    this._pitch = nextPitch;
+    this._yaw = nextYaw;
+    if (anglesChanged) {
+      this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+    }
+    const pos = this.entity.getPosition();
+    let nx = pos.x;
+    let ny = pos.y;
+    let nz = pos.z;
+    if (this.enableFly) {
+      const fast = this._keys.ShiftLeft || this._keys.ShiftRight;
+      const slow = this._keys.ControlLeft || this._keys.ControlRight;
+      const speed = (fast ? this.moveFastSpeed : slow ? this.moveSlowSpeed : this.moveSpeed) * dt;
+      const fwd = (this._keys.KeyW || this._keys.ArrowUp ? 1 : 0) - (this._keys.KeyS || this._keys.ArrowDown ? 1 : 0);
+      const strafe = (this._keys.KeyD || this._keys.ArrowRight ? 1 : 0) - (this._keys.KeyA || this._keys.ArrowLeft ? 1 : 0);
+      const scrollFwd = -this._scrollDelta * this.scrollSpeed;
+      if (fwd !== 0 || strafe !== 0 || scrollFwd !== 0) {
+        // Use yaw-only rotation so movement is always horizontal.
+        _quat.setFromEulerAngles(0, this._yaw, 0);
+        _quat.transformVector(Vec3.FORWARD, _flatForward);
+        _quat.transformVector(Vec3.RIGHT, _flatRight);
+        nx += _flatForward.x * (fwd * speed + scrollFwd) + _flatRight.x * strafe * speed;
+        nz += _flatForward.z * (fwd * speed + scrollFwd) + _flatRight.z * strafe * speed;
+      }
+      if (this.freeFly) {
+        const up = (this._keys.KeyE ? 1 : 0) - (this._keys.KeyQ ? 1 : 0);
+        if (up !== 0) {
+          ny += up * speed;
+        }
+      }
+    }
+    this._scrollDelta = 0;
+    if (!this.freeFly) {
+      // Circular XZ clamp: project back onto the circle edge if outside.
+      const cdx = nx - this.boundsCenter.x;
+      const cdz = nz - this.boundsCenter.z;
+      const dist = Math.sqrt(cdx * cdx + cdz * cdz);
+      if (dist > this.boundsRadius) {
+        const scale = this.boundsRadius / dist;
+        nx = this.boundsCenter.x + cdx * scale;
+        nz = this.boundsCenter.z + cdz * scale;
+      }
+    }
+    const groundY = this._hasGroundPlane ? yOnPlane(nx, nz, this._planeNormal, this._planePoint, this.boundsCenter.y) + this.averageCameraHeight : this.boundsCenter.y;
+    const targetY = this.freeFly ? ny : groundY;
+    // Only write the position when it actually moved. This keeps the scene node clean on
+    // idle frames; note it does not stop per-frame rasterization — while autoRender is on
+    // the app renders every frame regardless of whether the transform changed.
+    if (Math.abs(nx - pos.x) > POSITION_EPSILON || Math.abs(targetY - pos.y) > POSITION_EPSILON || Math.abs(nz - pos.z) > POSITION_EPSILON) {
+      this.entity.setPosition(nx, targetY, nz);
+    }
+  }
+  destroy() {
+    this._removeListeners.forEach(fn => fn());
+    this._removeListeners = [];
+  }
+}

package/components/svg/BlobbyGrayIconImage.js

@@ -1,42 +1,37 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgBlobbyGrayIconImage = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 200 128",
+  "aria-labelledby": titleId,
+  ...props,
+  children: [title ? /*#__PURE__*/_jsx("title", {
+    id: titleId,
+    children: title
+  }) : null, /*#__PURE__*/_jsxs("g", {
+    clipPath: "url(#blobby-gray-icon-image_svg__a)",
+    children: [/*#__PURE__*/_jsx("path", {
+      fill: "#F1F0EC",
+      fillRule: "evenodd",
+      d: "M113.962 6.222c26.535 2.074 38.447 30.862 44.693 56.735 4.621 19.146-2.901 38.537-18.932 49.978-15.595 11.131-35.55 10.486-51.986.639C63.732 99.19 34.311 80.943 40.954 53.757c7.619-31.19 41-50.037 73.009-47.535",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      fill: "#7F775B",
+      d: "M83.333 40C79.307 40 76 43.307 76 47.333v33.334C76 84.693 79.307 88 83.333 88h33.334c4.026 0 7.333-3.307 7.333-7.333V47.333c0-4.026-3.307-7.333-7.333-7.333zm0 4h33.334A3.304 3.304 0 0 1 120 47.333v27.274l-8.016-7.755-.002-.003a5.4 5.4 0 0 0-3.75-1.516 5.4 5.4 0 0 0-3.75 1.519l-2.732 2.643-8.24-7.972A5.4 5.4 0 0 0 89.758 60a5.4 5.4 0 0 0-3.75 1.52l-.003.003L80 67.333v-20A3.304 3.304 0 0 1 83.333 44m25.334 5.333c-1.834 0-3.462.76-4.495 1.922-1.033 1.163-1.505 2.634-1.505 4.078s.472 2.916 1.505 4.078 2.661 1.922 4.495 1.922c1.833 0 3.461-.76 4.494-1.922 1.034-1.162 1.506-2.633 1.506-4.078 0-1.444-.472-2.915-1.506-4.078-1.033-1.162-2.661-1.922-4.494-1.922m0 4c.833 0 1.205.24 1.505.578s.495.867.495 1.422c0 .556-.195 1.085-.495 1.422-.3.338-.672.578-1.505.578-.834 0-1.205-.24-1.506-.578s-.494-.866-.494-1.422.194-1.084.494-1.422c.301-.337.672-.578 1.506-.578M89.757 64a1.37 1.37 0 0 1 .972.398l8.143 7.878L86.752 84h-3.419A3.304 3.304 0 0 1 80 80.667v-7.769l8.787-8.5c.283-.274.626-.398.97-.398m18.475 5.333c.353 0 .691.123.971.394L120 80.172v.495A3.304 3.304 0 0 1 116.667 84h-24.16l14.756-14.273c.277-.268.618-.394.969-.394"
+    })]
+  }), /*#__PURE__*/_jsx("defs", {
+    children: /*#__PURE__*/_jsx("clipPath", {
+      id: "blobby-gray-icon-image_svg__a",
+      children: /*#__PURE__*/_jsx("path", {
+        fill: "#fff",
+        d: "M0 0h200v128H0z"
+      })
+    })
+  })]
 });
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
-const _excluded = ["title", "titleId"];
-const SvgBlobbyGrayIconImage = _ref => {
-  let {
-      title,
-      titleId
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 200 128",
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#blobby-gray-icon-image_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#F1F0EC",
-    fillRule: "evenodd",
-    d: "M113.962 6.222c26.535 2.074 38.447 30.862 44.693 56.735 4.621 19.146-2.901 38.537-18.932 49.978-15.595 11.131-35.55 10.486-51.986.639C63.732 99.19 34.311 80.943 40.954 53.757c7.619-31.19 41-50.037 73.009-47.535",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#7F775B",
-    d: "M83.333 40C79.307 40 76 43.307 76 47.333v33.334C76 84.693 79.307 88 83.333 88h33.334c4.026 0 7.333-3.307 7.333-7.333V47.333c0-4.026-3.307-7.333-7.333-7.333zm0 4h33.334A3.304 3.304 0 0 1 120 47.333v27.274l-8.016-7.755-.002-.003a5.4 5.4 0 0 0-3.75-1.516 5.4 5.4 0 0 0-3.75 1.519l-2.732 2.643-8.24-7.972A5.4 5.4 0 0 0 89.758 60a5.4 5.4 0 0 0-3.75 1.52l-.003.003L80 67.333v-20A3.304 3.304 0 0 1 83.333 44m25.334 5.333c-1.834 0-3.462.76-4.495 1.922-1.033 1.163-1.505 2.634-1.505 4.078s.472 2.916 1.505 4.078 2.661 1.922 4.495 1.922c1.833 0 3.461-.76 4.494-1.922 1.034-1.162 1.506-2.633 1.506-4.078 0-1.444-.472-2.915-1.506-4.078-1.033-1.162-2.661-1.922-4.494-1.922m0 4c.833 0 1.205.24 1.505.578s.495.867.495 1.422c0 .556-.195 1.085-.495 1.422-.3.338-.672.578-1.505.578-.834 0-1.205-.24-1.506-.578s-.494-.866-.494-1.422.194-1.084.494-1.422c.301-.337.672-.578 1.506-.578M89.757 64a1.37 1.37 0 0 1 .972.398l8.143 7.878L86.752 84h-3.419A3.304 3.304 0 0 1 80 80.667v-7.769l8.787-8.5c.283-.274.626-.398.97-.398m18.475 5.333c.353 0 .691.123.971.394L120 80.172v.495A3.304 3.304 0 0 1 116.667 84h-24.16l14.756-14.273c.277-.268.618-.394.969-.394"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "blobby-gray-icon-image_svg__a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h200v128H0z"
-  }))));
-};
-var _default = exports.default = SvgBlobbyGrayIconImage;
+export default SvgBlobbyGrayIconImage;

package/components/svg/BlobbyGrayIconImport.js

@@ -1,42 +1,37 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgBlobbyGrayIconImport = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 200 128",
+  "aria-labelledby": titleId,
+  ...props,
+  children: [title ? /*#__PURE__*/_jsx("title", {
+    id: titleId,
+    children: title
+  }) : null, /*#__PURE__*/_jsxs("g", {
+    clipPath: "url(#blobby-gray-icon-import_svg__a)",
+    children: [/*#__PURE__*/_jsx("path", {
+      fill: "#F1F0EC",
+      fillRule: "evenodd",
+      d: "M97.492 4.026c24.033-.76 45.335 14.966 53.284 37.66 8.572 24.47 4.488 52.73-16.101 68.491-22.132 16.943-53.93 19.23-75.615 1.718C39.75 96.3 45.34 68.141 53.67 44.76c7.4-20.77 21.784-40.036 43.822-40.734",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      fill: "#7F775B",
+      d: "M84.667 37.333c-3.29 0-6 2.71-6 6v41.334c0 3.29 2.71 6 6 6h30.666c3.29 0 6-2.71 6-6v-28c0-.53-.21-1.04-.586-1.414l-.02-.021-17.313-17.313a2 2 0 0 0-1.414-.586zm0 4H100v11.334c0 3.29 2.71 6 6 6h11.333v26c0 1.128-.871 2-2 2H84.667c-1.129 0-2-.872-2-2V43.333c0-1.128.871-2 2-2M104 44.161l10.505 10.506H106c-1.129 0-2-.872-2-2zM99.971 60a2 2 0 0 0-1.385.586l-5.333 5.333a2 2 0 1 0 2.828 2.828L98 66.828V74A2 2 0 1 0 102 74v-7.172l1.919 1.92a2.002 2.002 0 0 0 3.295-.63 1.99 1.99 0 0 0-.016-1.55 2 2 0 0 0-.451-.649l-5.333-5.333A2 2 0 0 0 99.971 60m-8.638 18.667a2.002 2.002 0 0 0-1.873 2.772 2 2 0 0 0 1.873 1.228h17.334a2 2 0 1 0 0-4z"
+    })]
+  }), /*#__PURE__*/_jsx("defs", {
+    children: /*#__PURE__*/_jsx("clipPath", {
+      id: "blobby-gray-icon-import_svg__a",
+      children: /*#__PURE__*/_jsx("path", {
+        fill: "#fff",
+        d: "M0 0h200v128H0z"
+      })
+    })
+  })]
 });
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
-const _excluded = ["title", "titleId"];
-const SvgBlobbyGrayIconImport = _ref => {
-  let {
-      title,
-      titleId
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 200 128",
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#blobby-gray-icon-import_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#F1F0EC",
-    fillRule: "evenodd",
-    d: "M97.492 4.026c24.033-.76 45.335 14.966 53.284 37.66 8.572 24.47 4.488 52.73-16.101 68.491-22.132 16.943-53.93 19.23-75.615 1.718C39.75 96.3 45.34 68.141 53.67 44.76c7.4-20.77 21.784-40.036 43.822-40.734",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#7F775B",
-    d: "M84.667 37.333c-3.29 0-6 2.71-6 6v41.334c0 3.29 2.71 6 6 6h30.666c3.29 0 6-2.71 6-6v-28c0-.53-.21-1.04-.586-1.414l-.02-.021-17.313-17.313a2 2 0 0 0-1.414-.586zm0 4H100v11.334c0 3.29 2.71 6 6 6h11.333v26c0 1.128-.871 2-2 2H84.667c-1.129 0-2-.872-2-2V43.333c0-1.128.871-2 2-2M104 44.161l10.505 10.506H106c-1.129 0-2-.872-2-2zM99.971 60a2 2 0 0 0-1.385.586l-5.333 5.333a2 2 0 1 0 2.828 2.828L98 66.828V74A2 2 0 1 0 102 74v-7.172l1.919 1.92a2.002 2.002 0 0 0 3.295-.63 1.99 1.99 0 0 0-.016-1.55 2 2 0 0 0-.451-.649l-5.333-5.333A2 2 0 0 0 99.971 60m-8.638 18.667a2.002 2.002 0 0 0-1.873 2.772 2 2 0 0 0 1.873 1.228h17.334a2 2 0 1 0 0-4z"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "blobby-gray-icon-import_svg__a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h200v128H0z"
-  }))));
-};
-var _default = exports.default = SvgBlobbyGrayIconImport;
+export default SvgBlobbyGrayIconImport;

package/components/svg/BlobbyGrayIconUploadToTheCloud.js

@@ -1,42 +1,37 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgBlobbyGrayIconUploadToTheCloud = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 200 128",
+  "aria-labelledby": titleId,
+  ...props,
+  children: [title ? /*#__PURE__*/_jsx("title", {
+    id: titleId,
+    children: title
+  }) : null, /*#__PURE__*/_jsxs("g", {
+    clipPath: "url(#blobby-gray-icon-upload-to-the-cloud_svg__a)",
+    children: [/*#__PURE__*/_jsx("path", {
+      fill: "#F1F0EC",
+      fillRule: "evenodd",
+      d: "M97.492 4.026c24.033-.76 45.335 14.966 53.284 37.66 8.572 24.47 4.488 52.73-16.101 68.491-22.132 16.943-53.93 19.23-75.615 1.718C39.75 96.3 45.34 68.141 53.67 44.76c7.4-20.77 21.784-40.036 43.822-40.734",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      fill: "#7F775B",
+      d: "M100 45.333c-8.373 0-15.264 6.467-15.943 14.667h-.724C77.084 60 72 65.084 72 71.333s5.084 11.334 11.333 11.334h12v-4h-12c-4.044 0-7.333-3.29-7.333-7.334S79.29 64 83.333 64H86a2 2 0 0 0 2-2v-.667c0-6.616 5.384-12 12-12s12 5.384 12 12V62a2 2 0 0 0 2 2h2.667c4.044 0 7.333 3.29 7.333 7.333s-3.289 7.334-7.333 7.334h-12v4h12c6.249 0 11.333-5.084 11.333-11.334C128 65.084 122.916 60 116.667 60h-.724c-.679-8.2-7.57-14.667-15.943-14.667m-.031 18.638a2 2 0 0 0-1.565.797l-5.818 5.818a2 2 0 1 0 2.828 2.828L98 70.828V86a2.002 2.002 0 0 0 2.772 1.874A2 2 0 0 0 102 86V70.828l2.586 2.586a1.998 1.998 0 0 0 3.295-.63 2.005 2.005 0 0 0-.467-2.198l-5.828-5.828a2 2 0 0 0-1.617-.787"
+    })]
+  }), /*#__PURE__*/_jsx("defs", {
+    children: /*#__PURE__*/_jsx("clipPath", {
+      id: "blobby-gray-icon-upload-to-the-cloud_svg__a",
+      children: /*#__PURE__*/_jsx("path", {
+        fill: "#fff",
+        d: "M0 0h200v128H0z"
+      })
+    })
+  })]
 });
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
-const _excluded = ["title", "titleId"];
-const SvgBlobbyGrayIconUploadToTheCloud = _ref => {
-  let {
-      title,
-      titleId
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 200 128",
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#blobby-gray-icon-upload-to-the-cloud_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#F1F0EC",
-    fillRule: "evenodd",
-    d: "M97.492 4.026c24.033-.76 45.335 14.966 53.284 37.66 8.572 24.47 4.488 52.73-16.101 68.491-22.132 16.943-53.93 19.23-75.615 1.718C39.75 96.3 45.34 68.141 53.67 44.76c7.4-20.77 21.784-40.036 43.822-40.734",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#7F775B",
-    d: "M100 45.333c-8.373 0-15.264 6.467-15.943 14.667h-.724C77.084 60 72 65.084 72 71.333s5.084 11.334 11.333 11.334h12v-4h-12c-4.044 0-7.333-3.29-7.333-7.334S79.29 64 83.333 64H86a2 2 0 0 0 2-2v-.667c0-6.616 5.384-12 12-12s12 5.384 12 12V62a2 2 0 0 0 2 2h2.667c4.044 0 7.333 3.29 7.333 7.333s-3.289 7.334-7.333 7.334h-12v4h12c6.249 0 11.333-5.084 11.333-11.334C128 65.084 122.916 60 116.667 60h-.724c-.679-8.2-7.57-14.667-15.943-14.667m-.031 18.638a2 2 0 0 0-1.565.797l-5.818 5.818a2 2 0 1 0 2.828 2.828L98 70.828V86a2.002 2.002 0 0 0 2.772 1.874A2 2 0 0 0 102 86V70.828l2.586 2.586a1.998 1.998 0 0 0 3.295-.63 2.005 2.005 0 0 0-.467-2.198l-5.828-5.828a2 2 0 0 0-1.617-.787"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "blobby-gray-icon-upload-to-the-cloud_svg__a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h200v128H0z"
-  }))));
-};
-var _default = exports.default = SvgBlobbyGrayIconUploadToTheCloud;
+export default SvgBlobbyGrayIconUploadToTheCloud;