@terraware/web-components 4.2.25 → 4.2.26-rc.1

package/components/Select/SelectT.js

@@ -1,14 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { Box } from '@mui/material';
 import classNames from 'classnames';
-import { isWhitespaces } from '../../utils';
-import Icon from '../Icon/Icon';
-import IconTooltip from '../IconTooltip';
+import 'lodash';
+import 'luxon';
+import isWhitespaces from '../../utils/text.js';
+import 'react-responsive';
+import Icon from '../Icon/Icon.js';
+import IconTooltip from '../IconTooltip/index.js';
 import './styles.scss';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-// Styles for overriding select dropdown
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export default function SelectT(props) {
+function SelectT(props) {
   const {
     className,
     disabled,
@@ -171,24 +173,24 @@ export default function SelectT(props) {
       }
     }
   };
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/jsxs(Box, {
     className: `select ${className}`,
     sx: sx,
-    children: [label && /*#__PURE__*/_jsxs("label", {
+    children: [label && /*#__PURE__*/jsxs("label", {
       htmlFor: id,
       className: "textfield-label",
-      children: [label, " ", required ? '*' : '', " ", tooltipTitle && /*#__PURE__*/_jsx(IconTooltip, {
+      children: [label, " ", required ? '*' : '', " ", tooltipTitle && /*#__PURE__*/jsx(IconTooltip, {
         title: tooltipTitle
       })]
-    }), /*#__PURE__*/_jsxs("div", {
+    }), /*#__PURE__*/jsxs("div", {
       className: `textfield-container ${fullWidth ? 'textfield-container--fullWidth' : ''}`,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/jsxs("div", {
         id: id,
         className: selectClass,
         onClick: toggleOptions,
         ref: inputRef,
         style: (selectStyles || {}).inputContainer,
-        children: [/*#__PURE__*/_jsx("input", {
+        children: [/*#__PURE__*/jsx("input", {
           ref: textFieldRef,
           value: displayLabel(selectedValue),
           readOnly: !editable || readonly,
@@ -199,20 +201,20 @@ export default function SelectT(props) {
           onFocus: onFocus,
           required: required,
           style: (selectStyles || {}).input
-        }), !hideArrow && /*#__PURE__*/_jsx(Icon, {
+        }), !hideArrow && /*#__PURE__*/jsx(Icon, {
           name: 'chevronDown',
           className: "textfield-value--icon-right",
           style: (selectStyles || {}).arrow
         })]
-      }), options && options.length > 0 && openedOptions && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [fixedMenu && /*#__PURE__*/_jsx("div", {
+      }), options && options.length > 0 && openedOptions && /*#__PURE__*/jsxs(Fragment, {
+        children: [fixedMenu && /*#__PURE__*/jsx("div", {
           className: "scroll-block"
-        }), /*#__PURE__*/_jsx("ul", {
+        }), /*#__PURE__*/jsx("ul", {
           className: 'options-container' + (fixedMenu ? ' fixed-menu' : '') + (fixedMenuPositioned ? ' positioned' : ''),
           ref: dropdownRef,
           style: (selectStyles || {}).optionsContainer,
           children: options.map((option, index) => {
-            return /*#__PURE__*/_jsx("li", {
+            return /*#__PURE__*/jsx("li", {
               "data-key": displayLabel(option).charAt(0).toUpperCase(),
               "data-selected": selectedIndex === index,
               onClick: () => !readonly ? onOptionSelected(option, index) : undefined,
@@ -223,30 +225,32 @@ export default function SelectT(props) {
           })
         })]
       })]
-    }), errorText && /*#__PURE__*/_jsxs("div", {
+    }), errorText && /*#__PURE__*/jsxs("div", {
       className: "textfield-label-container",
-      children: [/*#__PURE__*/_jsx(Icon, {
+      children: [/*#__PURE__*/jsx(Icon, {
         name: "error",
         className: "textfield-error-text--icon"
-      }), /*#__PURE__*/_jsx("label", {
+      }), /*#__PURE__*/jsx("label", {
         htmlFor: id,
         className: "textfield-error-text",
         children: errorText
       })]
-    }), warningText && /*#__PURE__*/_jsxs("div", {
+    }), warningText && /*#__PURE__*/jsxs("div", {
       className: "textfield-label-container",
-      children: [/*#__PURE__*/_jsx(Icon, {
+      children: [/*#__PURE__*/jsx(Icon, {
         name: "warning",
         className: "textfield-warning-text--icon"
-      }), /*#__PURE__*/_jsx("label", {
+      }), /*#__PURE__*/jsx("label", {
         htmlFor: id,
         className: "textfield-warning-text",
         children: warningText
       })]
-    }), helperText && /*#__PURE__*/_jsx("label", {
+    }), helperText && /*#__PURE__*/jsx("label", {
       htmlFor: id,
       className: "textfield-help-text",
       children: helperText
     })]
   });
-}
+}
+
+export { SelectT as default };

package/components/Separator/index.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import 'react';
 import { Box } from '@mui/material';
-import theme from '../../theme';
-import { jsx as _jsx } from "react/jsx-runtime";
+import theme from '../../theme.js';
+import { jsx } from 'react/jsx-runtime';
+
 const Separator = props => {
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/jsx(Box, {
     sx: {
       margin: theme.spacing(0, 2),
       width: '1px',
@@ -12,4 +13,5 @@ const Separator = props => {
     }
   });
 };
-export default Separator;
+
+export { Separator as default };

package/components/Size.js

@@ -1 +1 @@
-export {};
+

package/components/Slider/index.js

@@ -1,7 +1,8 @@
-import React from 'react';
-import { Slider as MuiSlider, useTheme } from '@mui/material';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Slider(props) {
+import 'react';
+import { useTheme, Slider as Slider$1 } from '@mui/material';
+import { jsx } from 'react/jsx-runtime';
+
+function Slider(props) {
   const {
     defaultValue,
     value,
@@ -39,7 +40,7 @@ export default function Slider(props) {
       onChange(val);
     }
   };
-  return /*#__PURE__*/_jsx(MuiSlider, {
+  return /*#__PURE__*/jsx(Slider$1, {
     "aria-label": "Slider",
     defaultValue: defaultValue,
     value: value,
@@ -51,4 +52,6 @@ export default function Slider(props) {
     valueLabelDisplay: valueLabelDisplay,
     sx: sliderStyles
   });
-}
+}
+
+export { Slider as default };

package/components/SummaryBox.js

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Info } from '@mui/icons-material';
-import { Box, IconButton, Typography, useTheme } from '@mui/material';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function SummaryBox({
+import { useTheme, Box, IconButton, Typography } from '@mui/material';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SummaryBox({
   title,
   value,
   variant = 'default',
@@ -44,20 +45,20 @@ export default function SummaryBox({
         };
     }
   }, [theme, variant]);
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/jsxs(Box, {
     id: id,
     sx: summaryBoxStyles,
-    children: [icon && /*#__PURE__*/_jsx(IconButton, {
+    children: [icon && /*#__PURE__*/jsx(IconButton, {
       onClick: onIconClick,
       sx: {
         position: 'absolute',
         right: theme.spacing(2)
       },
-      children: /*#__PURE__*/_jsx(Info, {})
-    }), /*#__PURE__*/_jsx(Typography, {
+      children: /*#__PURE__*/jsx(Info, {})
+    }), /*#__PURE__*/jsx(Typography, {
       component: "p",
       children: title
-    }), /*#__PURE__*/_jsx(Typography, {
+    }), /*#__PURE__*/jsx(Typography, {
       component: "p",
       variant: "h6",
       sx: {
@@ -67,4 +68,6 @@ export default function SummaryBox({
       children: value
     })]
   });
-}
+}
+
+export { SummaryBox as default };

package/components/Tabs/index.js

@@ -1,9 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { Box, Tab as MuiTab, Tooltip, useTheme } from '@mui/material';
-import { useDeviceInfo } from '../../utils';
-import Icon from '../Icon/Icon';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme, Tab, Tooltip, Box } from '@mui/material';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Icon from '../Icon/Icon.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
 const Tabs = ({
   activeTab,
   children,
@@ -67,17 +70,17 @@ const Tabs = ({
     }
   }, [activeTab]);
   const renderedTabs = useMemo(() => tabs.map((tab, index) => {
-    const muiTab = /*#__PURE__*/_jsx(MuiTab, {
+    const muiTab = /*#__PURE__*/jsx(Tab, {
       disabled: tab.disabled,
-      icon: tab.icon ? /*#__PURE__*/_jsx(Icon, {
+      icon: tab.icon ? /*#__PURE__*/jsx(Icon, {
         name: tab.icon
       }) : undefined,
-      label: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [tab.label, tab.tooltip && !tab.disabled && /*#__PURE__*/_jsx(Tooltip, {
+      label: /*#__PURE__*/jsxs(Fragment, {
+        children: [tab.label, tab.tooltip && !tab.disabled && /*#__PURE__*/jsx(Tooltip, {
           title: tab.tooltip,
           arrow: true,
           placement: "top-start",
-          children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/jsx("span", {
             style: {
               position: 'absolute',
               inset: 0
@@ -88,11 +91,11 @@ const Tabs = ({
       sx: tabStyles,
       value: tab.id
     }, index);
-    return tab.disabled ? /*#__PURE__*/_jsx(Tooltip, {
+    return tab.disabled ? /*#__PURE__*/jsx(Tooltip, {
       title: tab.tooltip,
       arrow: true,
       placement: "top-start",
-      children: /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/jsx("span", {
         style: {
           display: 'inline-flex'
         },
@@ -100,17 +103,17 @@ const Tabs = ({
       })
     }, index) : muiTab;
   }), [tabs]);
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/jsx(Box, {
     sx: {
       width: '100%',
       ...sx
     },
-    children: /*#__PURE__*/_jsxs(TabContext, {
+    children: /*#__PURE__*/jsxs(TabContext, {
       value: selectedTab,
-      children: [/*#__PURE__*/_jsx(Box, {
+      children: [/*#__PURE__*/jsx(Box, {
         sx: tabHeaderProps,
         className: "tab-header",
-        children: /*#__PURE__*/_jsx(TabList, {
+        children: /*#__PURE__*/jsx(TabList, {
           onChange: (unused, value) => setTab(value),
           sx: {
             minHeight: theme.spacing(4.5)
@@ -124,7 +127,7 @@ const Tabs = ({
           variant: 'scrollable',
           children: renderedTabs
         })
-      }), children, tabs.map((tab, index) => /*#__PURE__*/_jsx(TabPanel, {
+      }), children, tabs.map((tab, index) => /*#__PURE__*/jsx(TabPanel, {
         sx: tabPanelStyles,
         value: tab.id,
         children: tab.children
@@ -132,4 +135,5 @@ const Tabs = ({
     })
   });
 };
-export default Tabs;
+
+export { Tabs as default };

package/components/TextTruncated/index.js

@@ -1,16 +1,7 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Link, Tooltip, Typography, useTheme } from '@mui/material';
+import { useState, useEffect, useMemo } from 'react';
+import { useTheme, Typography, Tooltip, Link } from '@mui/material';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-/**
- * Represents the result of truncating the string list
- * text: the text to display before the '...# more' link
- * numberMore: the number to display in the '...# more' link
- *   has two special values
- *   0: the full text can be displayed; do not show '...# more'
- *   -1: the list is of length one but the element cannot be fully
- *       displayed. show '...more' without a '#'
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Compute TextDisplay for a list of strings
  * @param strings list of strings to process
@@ -47,7 +38,7 @@ function computeFromStringList(strings, maxLength, listSeparator) {
     numberMore: stringsRemaining
   };
 }
-export default function TextTruncated(props) {
+function TextTruncated(props) {
   const {
     stringList,
     listSeparator,
@@ -87,13 +78,13 @@ export default function TextTruncated(props) {
     e.stopPropagation();
     setShowAllOpen(!showAllOpen);
   };
-  return stringList.length > 0 ? /*#__PURE__*/_jsxs(Typography, {
+  return stringList.length > 0 ? /*#__PURE__*/jsxs(Typography, {
     sx: textStyle,
-    children: [textToDisplay.text, textToDisplay.numberMore !== 0 && moreText ? moreSeparator : '', textToDisplay.numberMore !== 0 ? /*#__PURE__*/_jsx(Tooltip, {
+    children: [textToDisplay.text, textToDisplay.numberMore !== 0 && moreText ? moreSeparator : '', textToDisplay.numberMore !== 0 ? /*#__PURE__*/jsx(Tooltip, {
       arrow: true,
       open: moreText ? showAllOpen : undefined,
       enterDelay: moreText ? 0 : 400,
-      title: /*#__PURE__*/_jsx(Typography, {
+      title: /*#__PURE__*/jsx(Typography, {
         sx: showAllStyle,
         fontSize: "14px",
         children: stringList.join(listSeparator)
@@ -118,7 +109,7 @@ export default function TextTruncated(props) {
           padding: '8px'
         }
       },
-      children: moreText ? /*#__PURE__*/_jsx(Link, {
+      children: moreText ? /*#__PURE__*/jsx(Link, {
         component: "button",
         onClick: onClickHandler,
         onBlur: () => setShowAllOpen(false),
@@ -126,14 +117,14 @@ export default function TextTruncated(props) {
           color: theme.palette.TwClrTxtBrand,
           textDecorationColor: `${theme.palette.TwClrTxtBrand}80`
         },
-        children: /*#__PURE__*/_jsx(Typography, {
+        children: /*#__PURE__*/jsx(Typography, {
           sx: {
             ...textStyle,
             marginTop: '-3px'
           },
           children: (textToDisplay.numberMore > 0 ? textToDisplay.numberMore + ' ' : '') + moreText
         })
-      }) : /*#__PURE__*/_jsx(Typography, {
+      }) : /*#__PURE__*/jsx(Typography, {
         sx: {
           ...textStyle,
           display: 'inline'
@@ -142,4 +133,6 @@ export default function TextTruncated(props) {
       })
     }) : null]
   }) : placeHolder || null;
-}
+}
+
+export { TextTruncated as default };

package/components/Textfield/Textfield.js

@@ -1,14 +1,18 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Box } from '@mui/material';
 import classNames from 'classnames';
-import { isWhitespaces } from '../../utils';
-import Icon from '../Icon/Icon';
-import IconTooltip from '../IconTooltip';
-import Markdown from '../Markdown';
-import TruncatedTextArea from './TruncatedTextArea';
+import 'lodash';
+import 'luxon';
+import isWhitespaces from '../../utils/text.js';
+import 'react-responsive';
+import Icon from '../Icon/Icon.js';
+import IconTooltip from '../IconTooltip/index.js';
+import Markdown from '../Markdown/index.js';
+import TruncatedTextArea from './TruncatedTextArea.js';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function TextField(props) {
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function TextField(props) {
   const {
     autoFocus,
     label,
@@ -78,10 +82,10 @@ export default function TextField(props) {
     if (iconRight === 'cancel' && !value) {
       return null;
     }
-    return /*#__PURE__*/_jsx("button", {
+    return /*#__PURE__*/jsx("button", {
       onClick: onClickRightIcon,
       className: "textfield-value--icon-container",
-      children: /*#__PURE__*/_jsx(Icon, {
+      children: /*#__PURE__*/jsx(Icon, {
         name: iconRight,
         className: `textfield-value--icon-right${iconRight === 'cancel' ? '--cancel' : ''}`
       })
@@ -102,15 +106,15 @@ export default function TextField(props) {
     if (!display || value === undefined) {
       return null;
     }
-    const component = markdown ? /*#__PURE__*/_jsx(Markdown, {
+    const component = markdown ? /*#__PURE__*/jsx(Markdown, {
       value: value.toString(),
       style: styles?.markdown
-    }) : /*#__PURE__*/_jsx("p", {
+    }) : /*#__PURE__*/jsx("p", {
       className: `textfield-value--display${preserveNewlines ? ' preserve-newlines' : ''}`,
       children: value
     });
     if (type === 'textarea' && truncateConfig) {
-      return /*#__PURE__*/_jsx(TruncatedTextArea, {
+      return /*#__PURE__*/jsx(TruncatedTextArea, {
         truncateConfig: truncateConfig,
         children: component
       });
@@ -118,23 +122,23 @@ export default function TextField(props) {
       return component;
     }
   }, [display, markdown, preserveNewlines, styles, truncateConfig, type, value]);
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/jsxs(Box, {
     className: `textfield ${className}`,
     sx: sx,
-    children: [/*#__PURE__*/_jsxs("label", {
+    children: [/*#__PURE__*/jsxs("label", {
       htmlFor: id,
       className: "textfield-label",
-      children: [required && label ? `${label} *` : label, tooltipTitle && /*#__PURE__*/_jsx(IconTooltip, {
+      children: [required && label ? `${label} *` : label, tooltipTitle && /*#__PURE__*/jsx(IconTooltip, {
         placement: "top",
         title: tooltipTitle
       })]
-    }), !display && (type === 'text' || type === 'number' ? /*#__PURE__*/_jsxs("div", {
+    }), !display && (type === 'text' || type === 'number' ? /*#__PURE__*/jsxs("div", {
       id: id,
       className: textfieldClass,
-      children: [iconLeft && /*#__PURE__*/_jsx(Icon, {
+      children: [iconLeft && /*#__PURE__*/jsx(Icon, {
         name: iconLeft,
         className: "textfield-value--icon-left"
-      }), /*#__PURE__*/_jsx("input", {
+      }), /*#__PURE__*/jsx("input", {
         autoFocus: autoFocus,
         value: type === 'number' ? value : value || '',
         disabled: readonly || disabled,
@@ -148,7 +152,7 @@ export default function TextField(props) {
         maxLength: maxLength,
         ...typeProps
       }), iconRight ? renderRightIcon() : null]
-    }) : /*#__PURE__*/_jsx("textarea", {
+    }) : /*#__PURE__*/jsx("textarea", {
       autoFocus: autoFocus,
       className: textfieldClass,
       value: value,
@@ -160,30 +164,32 @@ export default function TextField(props) {
       required: required,
       maxLength: maxLength,
       style: (styles || {}).textarea
-    })), displayComponent, errorText && /*#__PURE__*/_jsxs("div", {
+    })), displayComponent, errorText && /*#__PURE__*/jsxs("div", {
       className: "textfield-label-container",
-      children: [/*#__PURE__*/_jsx(Icon, {
+      children: [/*#__PURE__*/jsx(Icon, {
         name: "error",
         className: "textfield-error-text--icon"
-      }), /*#__PURE__*/_jsx("label", {
+      }), /*#__PURE__*/jsx("label", {
         htmlFor: id,
         className: "textfield-error-text",
         children: errorText
       })]
-    }), warningText && /*#__PURE__*/_jsxs("div", {
+    }), warningText && /*#__PURE__*/jsxs("div", {
       className: "textfield-label-container",
-      children: [/*#__PURE__*/_jsx(Icon, {
+      children: [/*#__PURE__*/jsx(Icon, {
         name: "warning",
         className: "textfield-warning-text--icon"
-      }), /*#__PURE__*/_jsx("label", {
+      }), /*#__PURE__*/jsx("label", {
         htmlFor: id,
         className: "textfield-warning-text",
         children: warningText
       })]
-    }), helperText && /*#__PURE__*/_jsx("label", {
+    }), helperText && /*#__PURE__*/jsx("label", {
       htmlFor: id,
       className: "textfield-help-text",
       children: helperText
     })]
   });
-}
+}
+
+export { TextField as default };

package/components/Textfield/TruncatedTextArea.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Link, Typography, useTheme } from '@mui/material';
+import { useState, useRef, useEffect } from 'react';
+import { useTheme, Link, Typography } from '@mui/material';
 import './styles.scss';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
 const TruncatedTextArea = ({
   truncateConfig,
   children
@@ -47,22 +48,22 @@ const TruncatedTextArea = ({
   if (needsTruncating && !showAll) {
     containerStyle.maxHeight = `${maxHeight}px`;
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
       style: containerStyle,
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/jsx("div", {
         ref: contentRef,
         style: {
           display: 'flow-root'
         },
         children: children
       })
-    }), needsTruncating && /*#__PURE__*/_jsx("div", {
+    }), needsTruncating && /*#__PURE__*/jsx("div", {
       style: {
         width: '100%',
         textAlign: alignment
       },
-      children: /*#__PURE__*/_jsx(Link, {
+      children: /*#__PURE__*/jsx(Link, {
         component: "button",
         onClick: toggleShowAll,
         onBlur: collapseOnBlur ? () => setShowAll(false) : undefined,
@@ -70,7 +71,7 @@ const TruncatedTextArea = ({
           color: theme.palette.TwClrTxtBrand,
           textDecorationColor: `${theme.palette.TwClrTxtBrand}80`
         },
-        children: /*#__PURE__*/_jsx(Typography, {
+        children: /*#__PURE__*/jsx(Typography, {
           sx: {
             ...showTextStyle,
             marginTop: '-3px'
@@ -81,4 +82,5 @@ const TruncatedTextArea = ({
     })]
   });
 };
-export default TruncatedTextArea;
+
+export { TruncatedTextArea as default };

package/components/TimelineSlider/TimelineMarker.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import 'react';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 const TimelineMarker = ({
   color,
   labelBottom,
@@ -10,20 +11,21 @@ const TimelineMarker = ({
   value
 }) => {
   const clampedValue = Math.min(1, Math.max(0, value));
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: `timeline-marker timeline-marker--${size} ${onClick ? 'timeline-marker--clickable' : ''}`,
     style: {
       left: `${clampedValue * 100}%`,
       backgroundColor: color
     },
     onClick: onClick,
-    children: [labelTop && /*#__PURE__*/_jsx("div", {
+    children: [labelTop && /*#__PURE__*/jsx("div", {
       className: "timeline-marker__label timeline-marker__label--top",
       children: labelTop
-    }), labelBottom && /*#__PURE__*/_jsx("div", {
+    }), labelBottom && /*#__PURE__*/jsx("div", {
       className: "timeline-marker__label timeline-marker__label--bottom",
       children: labelBottom
     })]
   });
 };
-export default TimelineMarker;
+
+export { TimelineMarker as default };

package/components/TimelineSlider/TimelineRail.js

@@ -1,9 +1,11 @@
-import React from 'react';
+import 'react';
 import './styles.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
+
 const TimelineRail = () => {
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/jsx("div", {
     className: "timeline-rail"
   });
 };
-export default TimelineRail;
+
+export { TimelineRail as default };