@terraware/web-components 4.2.17 → 4.2.18

package/components/PhotosCarousel/index.d.ts

@@ -0,0 +1,18 @@
+import React, { type JSX } from 'react';
+import 'react-multi-carousel/lib/styles.css';
+import './styles.scss';
+export type PhotoItem = {
+    url: string;
+    alt?: string;
+    decoration?: React.ReactNode;
+};
+export interface PhotosCarouselProps {
+    photos: PhotoItem[];
+    selectedSlide?: number;
+    onSlideChange?: (index: number) => void;
+    showArrows?: boolean;
+    numbered?: boolean;
+    dots?: boolean;
+}
+export default function PhotosCarousel(props: PhotosCarouselProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/PhotosCarousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotosCarousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AAElF,OAAO,qCAAqC,CAAC;AAK7C,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AASD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAsE9E"}

package/components/PhotosCarousel/index.js

@@ -0,0 +1,93 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+import { Box, Typography } from '@mui/material';
+import BusySpinner from '../BusySpinner';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const responsive = {
+  mobile: {
+    breakpoint: {
+      max: 4000,
+      min: 0
+    },
+    items: 1
+  }
+};
+export default function PhotosCarousel(props) {
+  const {
+    photos,
+    selectedSlide,
+    onSlideChange,
+    showArrows,
+    numbered,
+    dots
+  } = props;
+  const isControlled = selectedSlide !== undefined;
+  const [internalSlide, setInternalSlide] = useState(0);
+  const [isLoading, setIsLoading] = useState([]);
+  const myCarousel = useRef(null);
+  const currentSlide = isControlled ? selectedSlide : internalSlide;
+
+  // Keyed on the URLs (not just photos.length) so swapping in a same-length array of
+  // different photos still resets the loading state instead of leaving stale flags.
+  const photoKey = photos.map(p => p.url).join('|');
+  useEffect(() => {
+    setIsLoading(new Array(photos.length).fill(true));
+  }, [photoKey]);
+  useEffect(() => {
+    if (myCarousel.current && myCarousel.current.state.currentSlide !== currentSlide) {
+      myCarousel.current.goToSlide(currentSlide);
+    }
+  }, [currentSlide]);
+  const handleAfterChange = useCallback(() => {
+    const slide = myCarousel.current?.state.currentSlide ?? 0;
+    if (!isControlled) {
+      setInternalSlide(slide);
+    }
+    if (slide !== currentSlide) {
+      onSlideChange?.(slide);
+    }
+  }, [isControlled, currentSlide, onSlideChange]);
+  const finishLoading = index => {
+    setIsLoading(prev => {
+      const next = [...prev];
+      next[index] = false;
+      return next;
+    });
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      '& .react-multi-carousel-list': {
+        paddingBottom: '20px'
+      }
+    },
+    children: [/*#__PURE__*/_jsx(Carousel, {
+      responsive: responsive,
+      ref: myCarousel,
+      showDots: dots ?? true,
+      arrows: showArrows ?? false,
+      ssr: true,
+      afterChange: handleAfterChange,
+      children: photos.map((p, i) => /*#__PURE__*/_jsxs("div", {
+        className: "photos-carousel-container",
+        children: [isLoading[i] ? /*#__PURE__*/_jsx(BusySpinner, {
+          noBackground: true
+        }) : undefined, /*#__PURE__*/_jsx("a", {
+          href: p.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: /*#__PURE__*/_jsx("img", {
+            className: "photos-carousel-image",
+            src: p.url,
+            alt: p.alt,
+            onLoad: () => finishLoading(i)
+          })
+        })]
+      }, `photo-${i}-container`))
+    }), numbered ? /*#__PURE__*/_jsx(Typography, {
+      className: "photo-numbering",
+      children: `${currentSlide + 1}/${photos.length}`
+    }) : undefined, photos[currentSlide] && photos[currentSlide].decoration]
+  });
+}

package/components/{ViewPhotosDialog → PhotosCarousel}/styles.scss

@@ -1,11 +1,11 @@
 @use '../../style-dictionary-dist/terraware.scss';
 
-.view-photos-dialog-container {
+.photos-carousel-container {
   min-height: 200px;
   background: terraware.$tw-clr-bg;
 }
 
-.view-photos-dialog-image {
+.photos-carousel-image {
   object-fit: contain;
   margin: auto;
   height: 400px;

package/components/ViewPhotosDialog/index.d.ts

@@ -1,11 +1,5 @@
-import React, { type JSX } from 'react';
-import 'react-multi-carousel/lib/styles.css';
-import './styles.scss';
-export type PhotoItem = {
-    url: string;
-    alt?: string;
-    decoration?: React.ReactNode;
-};
+import { type JSX } from 'react';
+import { PhotoItem } from '../PhotosCarousel';
 export interface ViewPhotosDialogProps {
     open: boolean;
     onClose: () => void;

package/components/ViewPhotosDialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ViewPhotosDialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AAElF,OAAO,qCAAqC,CAAC;AAO7C,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CA6HlF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ViewPhotosDialog/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAuB,MAAM,OAAO,CAAC;AAI7D,OAAuB,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CA8ClF"}

package/components/ViewPhotosDialog/index.js

@@ -1,12 +1,8 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import Carousel from 'react-multi-carousel';
-import 'react-multi-carousel/lib/styles.css';
-import { Box, Typography } from '@mui/material';
-import BusySpinner from '../BusySpinner';
+import React, { useEffect, useState } from 'react';
 import Button from '../Button/Button';
 import DialogBox from '../DialogBox/DialogBox';
-import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PhotosCarousel from '../PhotosCarousel';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function ViewPhotosDialog(props) {
   const {
     onClose,
@@ -19,64 +15,12 @@ export default function ViewPhotosDialog(props) {
     numbered,
     dots
   } = props;
-  const [isPreviousDisabled, setIsPreviousDisabled] = useState(false);
-  const [isNextDisabled, setIsNextDisabled] = useState(false);
-  const [isLoading, setIsLoading] = useState([]);
   const [selectedSlide, setSelectedSlide] = useState(initialSelectedSlide);
-  const myCarousel = useRef(null);
-  const responsive = {
-    mobile: {
-      breakpoint: {
-        max: 4000,
-        min: 0
-      },
-      items: 1
-    }
-  };
-  const handleChange = useCallback(args => {
-    if (myCarousel.current) {
-      if (myCarousel.current.state.currentSlide + 1 >= photos.length) {
-        setIsNextDisabled(true);
-      } else {
-        setIsNextDisabled(false);
-      }
-      if (myCarousel.current.state.currentSlide - 1 < 0) {
-        setIsPreviousDisabled(true);
-      } else {
-        setIsPreviousDisabled(false);
-      }
-      if (args !== undefined) {
-        // if we came from the carousel component's call of handleChange, do the right thing
-        // don't set this slide if we came from useEffect on open
-        setSelectedSlide(myCarousel.current.state.currentSlide);
-      } else {
-        // we need to reinitialize to last state
-        if (selectedSlide === initialSelectedSlide) {
-          // explicitly go to slide, the useEffect won't be triggered
-          myCarousel.current.goToSlide(selectedSlide);
-        }
-      }
-    }
-  }, [photos.length, selectedSlide, initialSelectedSlide, selectedSlide]);
-  useEffect(() => {
-    setIsLoading(new Array(photos.length).fill(true));
-  }, [photos.length]);
   useEffect(() => {
     setSelectedSlide(initialSelectedSlide);
-  }, [initialSelectedSlide]);
-  useEffect(() => {
-    handleChange();
-  }, [open, handleChange]);
-  useEffect(() => {
-    if (myCarousel.current) {
-      myCarousel.current.goToSlide(selectedSlide);
-    }
-  }, [selectedSlide]);
-  const finishLoading = index => {
-    const newIsLoading = [...isLoading];
-    newIsLoading[index] = false;
-    setIsLoading(newIsLoading);
-  };
+  }, [initialSelectedSlide, open]);
+  const isPreviousDisabled = selectedSlide <= 0;
+  const isNextDisabled = selectedSlide >= photos.length - 1;
   return /*#__PURE__*/_jsx(DialogBox, {
     onClose: onClose,
     open: open,
@@ -95,38 +39,12 @@ export default function ViewPhotosDialog(props) {
       disabled: isNextDisabled,
       rightIcon: "caretRight"
     }, 'button-2')],
-    children: /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        '& .react-multi-carousel-list': {
-          paddingBottom: '20px'
-        }
-      },
-      children: [/*#__PURE__*/_jsx(Carousel, {
-        responsive: responsive,
-        ref: myCarousel,
-        showDots: dots ?? true,
-        arrows: false,
-        ssr: true,
-        afterChange: handleChange,
-        children: photos.map((p, i) => /*#__PURE__*/_jsxs("div", {
-          className: "view-photos-dialog-container",
-          children: [isLoading[i] ? /*#__PURE__*/_jsx(BusySpinner, {
-            noBackground: true
-          }) : undefined, /*#__PURE__*/_jsx("a", {
-            href: p.url,
-            target: "blank",
-            children: /*#__PURE__*/_jsx("img", {
-              className: "view-photos-dialog-image",
-              src: p.url,
-              alt: p.alt,
-              onLoad: () => finishLoading(i)
-            })
-          })]
-        }, `photo-${i}-container`))
-      }), numbered ? /*#__PURE__*/_jsx(Typography, {
-        className: "photo-numbering",
-        children: `${selectedSlide + 1}/${photos.length}`
-      }) : undefined, photos[selectedSlide] && photos[selectedSlide].decoration]
+    children: /*#__PURE__*/_jsx(PhotosCarousel, {
+      photos: photos,
+      selectedSlide: selectedSlide,
+      onSlideChange: setSelectedSlide,
+      numbered: numbered,
+      dots: dots
     })
   });
 }

package/components/VirtualWalkthrough/AnnotationPanel.d.ts

@@ -1,4 +1,4 @@
-import { AnnotationProps } from './Annotation';
+import type { AnnotationProps } from './Annotation';
 interface AnnotationPanelProps {
     annotation: AnnotationProps | null;
     hotspotPosition?: {

package/components/VirtualWalkthrough/AnnotationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,UAAU,oBAAoB;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IAInC,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjE,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAuDD,QAAA,MAAM,eAAe,GAAI,0CAA0C,oBAAoB,mDAsItF,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AnnotationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,UAAU,oBAAoB;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IAInC,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjE,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoDD,QAAA,MAAM,eAAe,GAAI,0CAA0C,oBAAoB,mDA8ItF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/VirtualWalkthrough/AnnotationPanel.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTheme } from '@mui/material';
+import PhotosCarousel from '../PhotosCarousel';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Fallback hotspot diameter (px) when the rendered size isn't reported yet.
 const DEFAULT_HOTSPOT_DIAMETER = 35;
@@ -34,13 +35,10 @@ const PANEL_STYLE = {
   display: 'flex',
   flexDirection: 'column'
 };
-const IMAGE_STYLE = {
-  width: 'auto',
-  height: 'auto',
-  maxWidth: '100%',
-  maxHeight: '60vh',
-  display: 'block',
+const CAROUSEL_STYLE = {
+  width: 'min(60vw, 640px)',
   borderRadius: '12px 12px 0 0',
+  overflow: 'hidden',
   flexShrink: 0
 };
 const TEXT_BLOCK_STYLE = {
@@ -109,7 +107,7 @@ const AnnotationPanel = ({
   const panelStyle = {
     ...PANEL_STYLE,
     ...(annotation.imageUrls?.[0] ? {
-      width: 'fit-content',
+      width: 'min(60vw, 640px)',
       maxWidth: '60vw'
     } : {
       width: 'fit-content',
@@ -150,10 +148,16 @@ const AnnotationPanel = ({
       ref: panelRef,
       "data-testid": "annotation-panel",
       style: panelStyle,
-      children: [annotation.imageUrls?.[0] && /*#__PURE__*/_jsx("img", {
-        src: annotation.imageUrls[0],
-        alt: annotation.title,
-        style: IMAGE_STYLE
+      children: [annotation.imageUrls && annotation.imageUrls.length > 0 && /*#__PURE__*/_jsx("div", {
+        style: CAROUSEL_STYLE,
+        children: /*#__PURE__*/_jsx(PhotosCarousel, {
+          photos: annotation.imageUrls.map(url => ({
+            url,
+            alt: annotation.title
+          })),
+          showArrows: true,
+          dots: false
+        })
       }), /*#__PURE__*/_jsxs("div", {
         style: TEXT_BLOCK_STYLE,
         children: [annotation.label && /*#__PURE__*/_jsx("span", {

package/index.d.ts

@@ -27,6 +27,7 @@ import Note from './components/Note';
 import OverlayModal from './components/OverlayModal/OverlayModal';
 import PageForm from './components/PageForm';
 import PhotoChooser from './components/PhotoChooser';
+import PhotosCarousel from './components/PhotosCarousel';
 import Pill from './components/Pill';
 import PillList from './components/PillList';
 import PlacementWrapper from './components/PlacementWrapper';
@@ -61,11 +62,12 @@ export type { EnhancedTableDetailsRow, RendererProps, TableColumnType, TableRowT
 export type { FormButton } from './components/FormBottomBar';
 export type { PhotoChooserErrorType, PhotoChooserProps } from './components/PhotoChooser';
 export type { FileChooserProps } from './components/FileChooser';
-export type { PhotoItem } from './components/ViewPhotosDialog';
+export type { PhotoItem } from './components/PhotosCarousel';
+export type { PhotosCarouselProps } from './components/PhotosCarousel';
 export type { SliderMark } from './components/Slider';
 export type { Tab, TabsProps } from './components/Tabs';
 export type { ConfirmProps } from './components/Confirm';
 export type { DatePickerDateType, Props as DatePickerProps } from './components/DatePicker/DatePicker';
 export type { DateType } from './utils/date';
-export { AntSwitch, Autocomplete, Badge, BusySpinner, Button, CellRenderer, CellDateRenderer, Checkbox, Confirm, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, EditableTable, ErrorBox, FileChooser, FormBottomBar, getComparator, icons, Icon, IconTooltip, MapComponent, Message, MultiSelect, NavFooter, NavItem, NavSection, Navbar, Note, OverlayModal, PageForm, Pill, PillList, PhotoChooser, PlacementWrapper, Popover, PopoverMenu, PopoverMultiSelect, ProgressCircle, RadioButton, Select, SelectT, Separator, Slider, stableSort, SummaryBox, Svg, Table, Tabs, Textfield, TextTruncated, TimelineSlider, theme, Tooltip, ViewPhotosDialog, };
+export { AntSwitch, Autocomplete, Badge, BusySpinner, Button, CellRenderer, CellDateRenderer, Checkbox, Confirm, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, EditableTable, ErrorBox, FileChooser, FormBottomBar, getComparator, icons, Icon, IconTooltip, MapComponent, Message, MultiSelect, NavFooter, NavItem, NavSection, Navbar, Note, OverlayModal, PageForm, Pill, PillList, PhotoChooser, PhotosCarousel, PlacementWrapper, Popover, PopoverMenu, PopoverMultiSelect, ProgressCircle, RadioButton, Select, SelectT, Separator, Slider, stableSort, SummaryBox, Svg, Table, Tabs, Textfield, TextTruncated, TimelineSlider, theme, Tooltip, ViewPhotosDialog, };
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

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

package/index.js

@@ -30,6 +30,7 @@ import Note from './components/Note';
 import OverlayModal from './components/OverlayModal/OverlayModal';
 import PageForm from './components/PageForm';
 import PhotoChooser from './components/PhotoChooser';
+import PhotosCarousel from './components/PhotosCarousel';
 import Pill from './components/Pill';
 import PillList from './components/PillList';
 import PlacementWrapper from './components/PlacementWrapper';
@@ -54,4 +55,4 @@ import Table from './components/table';
 import CellRenderer, { CellDateRenderer } from './components/table/TableCellRenderer';
 import { descendingComparator, getComparator, stableSort } from './components/table/sort';
 import theme from './theme';
-export { AntSwitch, Autocomplete, Badge, BusySpinner, Button, CellRenderer, CellDateRenderer, Checkbox, Confirm, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, EditableTable, ErrorBox, FileChooser, FormBottomBar, getComparator, icons, Icon, IconTooltip, MapComponent, Message, MultiSelect, NavFooter, NavItem, NavSection, Navbar, Note, OverlayModal, PageForm, Pill, PillList, PhotoChooser, PlacementWrapper, Popover, PopoverMenu, PopoverMultiSelect, ProgressCircle, RadioButton, Select, SelectT, Separator, Slider, stableSort, SummaryBox, Svg, Table, Tabs, Textfield, TextTruncated, TimelineSlider, theme, Tooltip, ViewPhotosDialog };
+export { AntSwitch, Autocomplete, Badge, BusySpinner, Button, CellRenderer, CellDateRenderer, Checkbox, Confirm, DatePicker, descendingComparator, DialogBox, Divisor, Dropdown, DropdownV1, EditableTable, ErrorBox, FileChooser, FormBottomBar, getComparator, icons, Icon, IconTooltip, MapComponent, Message, MultiSelect, NavFooter, NavItem, NavSection, Navbar, Note, OverlayModal, PageForm, Pill, PillList, PhotoChooser, PhotosCarousel, PlacementWrapper, Popover, PopoverMenu, PopoverMultiSelect, ProgressCircle, RadioButton, Select, SelectT, Separator, Slider, stableSort, SummaryBox, Svg, Table, Tabs, Textfield, TextTruncated, TimelineSlider, theme, Tooltip, ViewPhotosDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "4.2.17",
+  "version": "4.2.18",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {