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

package/components/EditableTable/index.js

@@ -1,16 +1,8 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = EditableTable;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _materialReactTable = require("material-react-table");
-var _Button = _interopRequireDefault(require("../Button/Button"));
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box, MenuItem, TextField, useTheme } from '@mui/material';
+import { MaterialReactTable as MRTTable, MRT_ToolbarInternalButtons, useMaterialReactTable } from 'material-react-table';
+import Button from '../Button/Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isActiveFilter = filter => {
   if (!filter.value) {
     return false;
@@ -20,41 +12,40 @@ const isActiveFilter = filter => {
   }
   return filter.value !== null && filter.value !== undefined && filter.value !== '';
 };
-function EditableTable(_ref) {
-  let {
-    clearAllFiltersLabel,
-    columns,
-    data,
-    enableClearAllFilters = true,
-    enableEditing = false,
-    enableColumnOrdering = false,
-    enableColumnPinning = false,
-    enableSorting = true,
-    enableGlobalFilter = false,
-    enableColumnFilters = false,
-    stickyFilters = false,
-    storageKey,
-    enablePagination = true,
-    enableBottomToolbar = true,
-    enableTopToolbar = true,
-    initialSorting,
-    onClearAllFilters,
-    onRowClick,
-    renderToolbarInternalActions,
-    sx,
-    tableOptions = {}
-  } = _ref;
-  const theme = (0, _material.useTheme)();
+export default function EditableTable({
+  clearAllFiltersLabel,
+  columns,
+  data,
+  enableClearAllFilters = true,
+  enableEditing = false,
+  enableColumnOrdering = false,
+  enableColumnPinning = false,
+  enableSorting = true,
+  enableGlobalFilter = false,
+  enableColumnFilters = false,
+  stickyFilters = false,
+  storageKey,
+  enablePagination = true,
+  enableBottomToolbar = true,
+  enableTopToolbar = true,
+  initialSorting,
+  onClearAllFilters,
+  onRowClick,
+  renderToolbarInternalActions,
+  sx,
+  tableOptions = {}
+}) {
+  const theme = useTheme();
   const filtersEnabled = enableColumnFilters || enableGlobalFilter;
   const showClearAllFilters = enableClearAllFilters && filtersEnabled;
 
   // Sticky column filters - load from localStorage (only if stickyFilters is enabled)
-  const [columnFilters, setColumnFilters] = (0, _react.useState)(() => {
+  const [columnFilters, setColumnFilters] = useState(() => {
     if (!stickyFilters || !storageKey) {
       return [];
     }
     try {
-      const saved = localStorage.getItem("".concat(storageKey, "_columnFilters"));
+      const saved = localStorage.getItem(`${storageKey}_columnFilters`);
       if (saved) {
         const parsed = JSON.parse(saved);
 
@@ -69,31 +60,30 @@ function EditableTable(_ref) {
   });
 
   // Save column filters to localStorage when they change
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (!stickyFilters || !storageKey) {
       return;
     }
     try {
       // Filter out any filters with null or empty values before saving
       const validFilters = columnFilters.filter(isActiveFilter);
-      localStorage.setItem("".concat(storageKey, "_columnFilters"), JSON.stringify(validFilters));
+      localStorage.setItem(`${storageKey}_columnFilters`, JSON.stringify(validFilters));
     } catch (error) {
       console.error('Error saving column filters:', error);
     }
   }, [columnFilters, stickyFilters, storageKey]);
 
   // Convert simplified column definitions to MRT column definitions
-  const mrtColumns = (0, _react.useMemo)(() => {
+  const mrtColumns = useMemo(() => {
     return columns.map(col => {
-      var _col$enableEditing, _col$enableHiding;
       const mrtCol = {
         id: col.id,
         header: col.header,
         accessorKey: col.accessorKey,
         accessorFn: col.accessorFn,
         size: col.size,
-        enableEditing: (_col$enableEditing = col.enableEditing) !== null && _col$enableEditing !== void 0 ? _col$enableEditing : enableEditing,
-        enableHiding: (_col$enableHiding = col.enableHiding) !== null && _col$enableHiding !== void 0 ? _col$enableHiding : true,
+        enableEditing: col.enableEditing ?? enableEditing,
+        enableHiding: col.enableHiding ?? true,
         Cell: col.Cell,
         filterVariant: col.filterVariant,
         filterSelectOptions: col.filterSelectOptions,
@@ -119,20 +109,19 @@ function EditableTable(_ref) {
         } else if (editVariant === 'select' && selectOptions) {
           mrtCol.editVariant = 'select';
           mrtCol.editSelectOptions = selectOptions;
-          const SelectEditComponent = _ref2 => {
-            let {
-              cell,
-              row,
-              table: iTable
-            } = _ref2;
-            const [value, setValue] = _react.default.useState(cell.getValue() || '');
-            const handleSave = (0, _react.useCallback)(() => {
+          const SelectEditComponent = ({
+            cell,
+            row,
+            table: iTable
+          }) => {
+            const [value, setValue] = React.useState(cell.getValue() || '');
+            const handleSave = useCallback(() => {
               if (onSave) {
                 void onSave(row.original, value, col.id);
               }
               iTable.setEditingCell(null);
             }, [value]);
-            return /*#__PURE__*/_react.default.createElement(_material.TextField, {
+            return /*#__PURE__*/_jsx(TextField, {
               select: true,
               value: value,
               onChange: e => setValue(e.target.value),
@@ -145,80 +134,82 @@ function EditableTable(_ref) {
                 }
               },
               size: "small",
-              fullWidth: true
-            }, selectOptions.map(option => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-              key: option.value,
-              value: option.value
-            }, option.label)));
+              fullWidth: true,
+              children: selectOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
+                value: option.value,
+                children: option.label
+              }, option.value))
+            });
           };
           mrtCol.Edit = SelectEditComponent;
         } else {
           // Default text input with onBlur save
-          mrtCol.muiEditTextFieldProps = _ref3 => {
-            let {
-              row
-            } = _ref3;
-            return {
-              onBlur: event => {
-                if (onSave) {
-                  const value = event.target.value;
-                  // eslint-disable-next-line react/prop-types
-                  void onSave(row.original, value, col.id);
-                }
+          mrtCol.muiEditTextFieldProps = ({
+            row
+          }) => ({
+            onBlur: event => {
+              if (onSave) {
+                const value = event.target.value;
+                // eslint-disable-next-line react/prop-types
+                void onSave(row.original, value, col.id);
               }
-            };
-          };
+            }
+          });
         }
       }
       return mrtCol;
     });
   }, [columns, enableEditing]);
-  const initialStateConfig = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, initialSorting ? {
-    sorting: initialSorting
-  } : {}), enableColumnFilters ? {
-    showColumnFilters: true
-  } : {}), enableGlobalFilter ? {
-    showGlobalFilter: true
-  } : {});
-  const handleClearAllFilters = (0, _react.useCallback)(tbl => {
+  const initialStateConfig = {
+    ...(initialSorting ? {
+      sorting: initialSorting
+    } : {}),
+    ...(enableColumnFilters ? {
+      showColumnFilters: true
+    } : {}),
+    ...(enableGlobalFilter ? {
+      showGlobalFilter: true
+    } : {})
+  };
+  const handleClearAllFilters = useCallback(tbl => {
     tbl.resetColumnFilters();
     if (enableGlobalFilter) {
       tbl.resetGlobalFilter();
     }
     setColumnFilters([]);
     if (storageKey) {
-      localStorage.removeItem("".concat(storageKey, "_columnFilters"));
+      localStorage.removeItem(`${storageKey}_columnFilters`);
     }
-    onClearAllFilters === null || onClearAllFilters === void 0 ? void 0 : onClearAllFilters();
+    onClearAllFilters?.();
   }, [enableGlobalFilter, storageKey, onClearAllFilters]);
-  const consumerRenderTopToolbarCustomActions = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.renderTopToolbarCustomActions;
-  const consumerRenderToolbarInternalActions = renderToolbarInternalActions !== null && renderToolbarInternalActions !== void 0 ? renderToolbarInternalActions : tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.renderToolbarInternalActions;
-  const composedRenderToolbarInternalActions = (0, _react.useCallback)(_ref4 => {
-    let {
-      table: tbl
-    } = _ref4;
+  const consumerRenderTopToolbarCustomActions = tableOptions?.renderTopToolbarCustomActions;
+  const consumerRenderToolbarInternalActions = renderToolbarInternalActions ?? tableOptions?.renderToolbarInternalActions;
+  const composedRenderToolbarInternalActions = useCallback(({
+    table: tbl
+  }) => {
     const state = tbl.getState();
     const hasColumnFilters = state.columnFilters.some(isActiveFilter);
     const hasGlobalFilter = enableGlobalFilter && !!state.globalFilter;
     const hasActiveFilters = hasColumnFilters || hasGlobalFilter;
-    return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    return /*#__PURE__*/_jsxs(Box, {
       sx: {
         display: 'flex',
         alignItems: 'center',
         gap: 1
-      }
-    }, showClearAllFilters && hasActiveFilters && /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: () => handleClearAllFilters(tbl),
-      label: clearAllFiltersLabel,
-      priority: "ghost",
-      size: "small"
-    }), consumerRenderToolbarInternalActions ? consumerRenderToolbarInternalActions({
-      table: tbl
-    }) : /*#__PURE__*/_react.default.createElement(_materialReactTable.MRT_ToolbarInternalButtons, {
-      table: tbl
-    }));
+      },
+      children: [showClearAllFilters && hasActiveFilters && /*#__PURE__*/_jsx(Button, {
+        onClick: () => handleClearAllFilters(tbl),
+        label: clearAllFiltersLabel,
+        priority: "ghost",
+        size: "small"
+      }), consumerRenderToolbarInternalActions ? consumerRenderToolbarInternalActions({
+        table: tbl
+      }) : /*#__PURE__*/_jsx(MRT_ToolbarInternalButtons, {
+        table: tbl
+      })]
+    });
   }, [showClearAllFilters, consumerRenderToolbarInternalActions, enableGlobalFilter, handleClearAllFilters, clearAllFiltersLabel]);
-  const table = (0, _materialReactTable.useMaterialReactTable)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+  const table = useMaterialReactTable({
     columns: mrtColumns,
     data,
     editDisplayMode: 'cell',
@@ -232,10 +223,10 @@ function EditableTable(_ref) {
     enablePagination,
     enableBottomToolbar: enablePagination ? enableBottomToolbar : false,
     enableTopToolbar,
-    positionGlobalFilter: enableGlobalFilter ? 'left' : undefined
-  }, Object.keys(initialStateConfig).length > 0 ? {
-    initialState: initialStateConfig
-  } : {}), {}, {
+    positionGlobalFilter: enableGlobalFilter ? 'left' : undefined,
+    ...(Object.keys(initialStateConfig).length > 0 ? {
+      initialState: initialStateConfig
+    } : {}),
     muiTableBodyProps: {
       sx: {
         '& tr:nth-of-type(odd) > td': {
@@ -246,37 +237,40 @@ function EditableTable(_ref) {
     muiTablePaperProps: {
       elevation: 0
     },
-    muiTableBodyRowProps: _ref5 => {
-      let {
-        row
-      } = _ref5;
-      return {
-        // eslint-disable-next-line react/prop-types
-        onClick: onRowClick ? () => onRowClick(row.original) : undefined,
-        sx: {
-          cursor: onRowClick ? 'pointer' : 'default',
-          '& td': {
-            borderBottom: 'none'
-          }
+    muiTableBodyRowProps: ({
+      row
+    }) => ({
+      // eslint-disable-next-line react/prop-types
+      onClick: onRowClick ? () => onRowClick(row.original) : undefined,
+      sx: {
+        cursor: onRowClick ? 'pointer' : 'default',
+        '& td': {
+          borderBottom: 'none'
         }
-      };
-    }
-  }, tableOptions), {}, {
-    // These must come after ...tableOptions to avoid being overridden
-    renderToolbarInternalActions: composedRenderToolbarInternalActions
-  }, consumerRenderTopToolbarCustomActions ? {
-    renderTopToolbarCustomActions: consumerRenderTopToolbarCustomActions
-  } : {}), stickyFilters && storageKey ? {
-    state: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.state), {}, {
-      columnFilters
+      }
     }),
-    onColumnFiltersChange: setColumnFilters
-  } : {}));
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    // Merge any additional table options
+    ...tableOptions,
+    // These must come after ...tableOptions to avoid being overridden
+    renderToolbarInternalActions: composedRenderToolbarInternalActions,
+    ...(consumerRenderTopToolbarCustomActions ? {
+      renderTopToolbarCustomActions: consumerRenderTopToolbarCustomActions
+    } : {}),
+    // Add sticky filters state if enabled
+    ...(stickyFilters && storageKey ? {
+      state: {
+        ...tableOptions?.state,
+        columnFilters
+      },
+      onColumnFiltersChange: setColumnFilters
+    } : {})
+  });
+  return /*#__PURE__*/_jsx(Box, {
     minHeight: "160px",
     padding: 2,
-    sx: sx
-  }, /*#__PURE__*/_react.default.createElement(_materialReactTable.MaterialReactTable, {
-    table: table
-  }));
+    sx: sx,
+    children: /*#__PURE__*/_jsx(MRTTable, {
+      table: table
+    })
+  });
 }

package/components/ErrorBox/ErrorBox.js

@@ -1,17 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ErrorBox;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
-var _Button = _interopRequireDefault(require("../Button/Button"));
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-require("./styles.scss");
-function ErrorBox(props) {
+import React from 'react';
+import { Box } from '@mui/material';
+import useDeviceInfo from '../../utils/useDeviceInfo';
+import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ErrorBox(props) {
   const {
     text,
     onClick,
@@ -22,26 +16,33 @@ function ErrorBox(props) {
   } = props;
   const {
     isMobile
-  } = (0, _useDeviceInfo.default)();
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "error-box ".concat(className, " ").concat(isMobile ? 'mobile' : ''),
-    sx: sx
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "error-box--container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "error",
-    className: "error-icon",
-    size: "large"
-  }), /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("h1", {
-    className: "error-title"
-  }, title), /*#__PURE__*/_react.default.createElement("p", {
-    className: "error-text"
-  }, text))), buttonText && onClick && /*#__PURE__*/_react.default.createElement("div", {
-    className: "button-container"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    label: buttonText,
-    priority: "secondary",
-    type: "passive",
-    onClick: onClick
-  })));
+  } = useDeviceInfo();
+  return /*#__PURE__*/_jsxs(Box, {
+    className: `error-box ${className} ${isMobile ? 'mobile' : ''}`,
+    sx: sx,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "error-box--container",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "error",
+        className: "error-icon",
+        size: "large"
+      }), /*#__PURE__*/_jsxs("div", {
+        children: [title && /*#__PURE__*/_jsx("h1", {
+          className: "error-title",
+          children: title
+        }), /*#__PURE__*/_jsx("p", {
+          className: "error-text",
+          children: text
+        })]
+      })]
+    }), buttonText && onClick && /*#__PURE__*/_jsx("div", {
+      className: "button-container",
+      children: /*#__PURE__*/_jsx(Button, {
+        label: buttonText,
+        priority: "secondary",
+        type: "passive",
+        onClick: onClick
+      })
+    })]
+  });
 }

package/components/FileChooser/index.js

@@ -1,17 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FileChooser;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _utils = require("../../utils");
-var _Button = _interopRequireDefault(require("../Button/Button"));
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-function FileChooser(props) {
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Link, Typography, useTheme } from '@mui/material';
+import { useDeviceInfo } from '../../utils';
+import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function FileChooser(props) {
   const {
     acceptFileType,
     chooseFileText,
@@ -31,11 +24,11 @@ function FileChooser(props) {
   } = props;
   const {
     isMobile
-  } = (0, _utils.useDeviceInfo)();
-  const inputRef = (0, _react.useRef)(null);
-  const theme = (0, _material.useTheme)();
-  const [editing, setEditing] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
+  } = useDeviceInfo();
+  const inputRef = useRef(null);
+  const theme = useTheme();
+  const [editing, setEditing] = useState(false);
+  useEffect(() => {
     setEditing(!!selectedFile);
   }, [selectedFile]);
   const addFiles = fileList => {
@@ -47,7 +40,7 @@ function FileChooser(props) {
       }
     }
     if (newFiles.length) {
-      setFiles([...(files !== null && files !== void 0 ? files : []), ...newFiles].slice(0, maxFiles));
+      setFiles([...(files ?? []), ...newFiles].slice(0, maxFiles));
     }
   };
   const dropHandler = event => {
@@ -58,9 +51,8 @@ function FileChooser(props) {
     event.preventDefault();
   };
   const onChooseFileHandler = () => {
-    var _inputRef$current;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
-    onChoosingFiles === null || onChoosingFiles === void 0 ? void 0 : onChoosingFiles();
+    inputRef.current?.click();
+    onChoosingFiles?.();
   };
   const onFileChosen = event => {
     if (editing) {
@@ -70,10 +62,10 @@ function FileChooser(props) {
       addFiles(event.currentTarget.files);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     onDrop: dropHandler,
     onDragOver: enableDropping,
-    border: "1px dashed ".concat(theme.palette.TwClrBrdrTertiary),
+    border: `1px dashed ${theme.palette.TwClrBrdrTertiary}`,
     borderRadius: theme.spacing(2),
     display: "flex",
     flexDirection: "column",
@@ -81,57 +73,61 @@ function FileChooser(props) {
     padding: theme.spacing(3),
     sx: {
       background: theme.palette.TwClrBg
-    }
-  }, iconName && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: iconName,
-    size: "xlarge",
-    style: {
-      height: '120px',
-      width: '120px'
-    }
-  }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    color: theme.palette.TwClrTxt,
-    fontSize: 14,
-    fontWeight: 600,
-    margin: theme.spacing(0, 0, 1)
-  }, !editing && ((files || []).length > 0 && !multipleSelection ? files === null || files === void 0 ? void 0 : files[0].name : uploadText)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    color: theme.palette.TwClrTxt,
-    fontSize: 12,
-    fontWeight: 400,
-    margin: 0
-  }, (editing || (files || []).length > 0) && !multipleSelection ? fileSelectedText : isMobile && uploadMobileDescription ? uploadMobileDescription : uploadDescription), /*#__PURE__*/_react.default.createElement("input", {
-    type: "file",
-    ref: inputRef,
-    onChange: onFileChosen,
-    accept: acceptFileType,
-    multiple: multipleSelection || false,
-    value: '',
-    style: {
-      display: 'none'
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: onChooseFileHandler,
-    disabled: maxFiles !== undefined ? (files || []).length >= maxFiles : false,
-    label: !multipleSelection && ((files || []).length === 1 || editing) ? replaceFileText : chooseFileText,
-    priority: "secondary",
-    type: "passive",
-    sx: {
-      marginTop: theme.spacing(3)
-    }
-  }), template && /*#__PURE__*/_react.default.createElement(_material.Link, {
-    href: template.url,
-    target: "_blank",
-    sx: {
-      color: theme.palette.TwClrTxtBrand,
-      fontFamily: 'Inter',
-      fontSize: '12px',
-      fontWeight: 500,
-      lineHeight: '16px',
-      marginTop: theme.spacing(2),
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'underline'
+    },
+    children: [iconName && /*#__PURE__*/_jsx(Icon, {
+      name: iconName,
+      size: "xlarge",
+      style: {
+        height: '120px',
+        width: '120px'
       }
-    }
-  }, template.text));
+    }), /*#__PURE__*/_jsx(Typography, {
+      color: theme.palette.TwClrTxt,
+      fontSize: 14,
+      fontWeight: 600,
+      margin: theme.spacing(0, 0, 1),
+      children: !editing && ((files || []).length > 0 && !multipleSelection ? files?.[0].name : uploadText)
+    }), /*#__PURE__*/_jsx(Typography, {
+      color: theme.palette.TwClrTxt,
+      fontSize: 12,
+      fontWeight: 400,
+      margin: 0,
+      children: (editing || (files || []).length > 0) && !multipleSelection ? fileSelectedText : isMobile && uploadMobileDescription ? uploadMobileDescription : uploadDescription
+    }), /*#__PURE__*/_jsx("input", {
+      type: "file",
+      ref: inputRef,
+      onChange: onFileChosen,
+      accept: acceptFileType,
+      multiple: multipleSelection || false,
+      value: '',
+      style: {
+        display: 'none'
+      }
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: onChooseFileHandler,
+      disabled: maxFiles !== undefined ? (files || []).length >= maxFiles : false,
+      label: !multipleSelection && ((files || []).length === 1 || editing) ? replaceFileText : chooseFileText,
+      priority: "secondary",
+      type: "passive",
+      sx: {
+        marginTop: theme.spacing(3)
+      }
+    }), template && /*#__PURE__*/_jsx(Link, {
+      href: template.url,
+      target: "_blank",
+      sx: {
+        color: theme.palette.TwClrTxtBrand,
+        fontFamily: 'Inter',
+        fontSize: '12px',
+        fontWeight: 500,
+        lineHeight: '16px',
+        marginTop: theme.spacing(2),
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'underline'
+        }
+      },
+      children: template.text
+    })]
+  });
 }