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

package/components/FormBottomBar/index.js

@@ -1,33 +1,26 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FormBottomBar;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
-var _Button = _interopRequireDefault(require("../Button/Button"));
+import React from 'react';
+import { AppBar, Box, useTheme } from '@mui/material';
+import useDeviceInfo from '../../utils/useDeviceInfo';
+import Button from '../Button/Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultDesktopOffset = '200px';
-function FormBottomBar(_ref) {
-  let {
-    cancelID,
-    saveID,
-    onCancel,
-    cancelButtonText,
-    saveButtonText,
-    saveDisabled,
-    onSave,
-    additionalRightButtons,
-    desktopOffset
-  } = _ref;
+export default function FormBottomBar({
+  cancelID,
+  saveID,
+  onCancel,
+  cancelButtonText,
+  saveButtonText,
+  saveDisabled,
+  onSave,
+  additionalRightButtons,
+  desktopOffset
+}) {
   const {
     isMobile,
     isDesktop
-  } = (0, _useDeviceInfo.default)();
-  const theme = (0, _material.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_material.AppBar, {
+  } = useDeviceInfo();
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(AppBar, {
     position: "fixed",
     color: "primary",
     style: {
@@ -37,54 +30,55 @@ function FormBottomBar(_ref) {
       left: isDesktop ? 'auto' : 0
     },
     sx: {
-      background: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray025, "00,") + "".concat(theme.palette.TwClrBaseGray025, "80, ").concat(theme.palette.TwClrBaseGray025, "80,") + "".concat(theme.palette.TwClrBaseGray025, "00)"),
+      background: `linear-gradient(to right, ${theme.palette.TwClrBaseGray025}00,` + `${theme.palette.TwClrBaseGray025}80, ${theme.palette.TwClrBaseGray025}80,` + `${theme.palette.TwClrBaseGray025}00)`,
       backdropFilter: 'blur(16px)',
       borderTop: '1px solid',
-      borderImage: "linear-gradient(to right, ".concat(theme.palette.TwClrBaseGray300, "00,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "FF,") + "".concat(theme.palette.TwClrBaseGray300, "FF, ").concat(theme.palette.TwClrBaseGray300, "00) 1"),
+      borderImage: `linear-gradient(to right, ${theme.palette.TwClrBaseGray300}00,` + `${theme.palette.TwClrBaseGray300}FF, ${theme.palette.TwClrBaseGray300}FF,` + `${theme.palette.TwClrBaseGray300}FF, ${theme.palette.TwClrBaseGray300}00) 1`,
       boxShadow: 'none',
       justifyContent: 'space-between',
       display: 'flex',
       flexDirection: isMobile ? 'column-reverse' : 'row',
-      padding: isDesktop ? '16px 24px' : "16px 24px ".concat(theme.spacing(5)),
-      width: isDesktop ? "calc(100% - ".concat(desktopOffset || defaultDesktopOffset, ")") : '100%',
+      padding: isDesktop ? '16px 24px' : `16px 24px ${theme.spacing(5)}`,
+      width: isDesktop ? `calc(100% - ${desktopOffset || defaultDesktopOffset})` : '100%',
       zIndex: 1000
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    id: cancelID || 'cancelBottomBar',
-    size: "medium",
-    label: cancelButtonText,
-    onClick: onCancel,
-    priority: "secondary",
-    type: "passive",
-    style: {
-      marginTop: isMobile ? theme.spacing(1) : 'auto',
-      marginRight: theme.spacing(1)
-    }
-  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    sx: {
-      display: 'flex',
-      flexDirection: isMobile ? 'column-reverse' : 'row'
-    }
-  }, additionalRightButtons && additionalRightButtons.map(btn => /*#__PURE__*/_react.default.createElement(_Button.default, {
-    id: btn.id,
-    key: btn.id,
-    priority: btn.buttonPriority,
-    type: btn.buttonType,
-    size: "medium",
-    label: btn.text,
-    onClick: btn.onClick,
-    disabled: btn.disabled,
-    style: {
-      marginTop: isMobile ? theme.spacing(1) : 'auto'
-    }
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    id: saveID || 'saveBottomBar',
-    size: "medium",
-    label: saveButtonText,
-    onClick: onSave,
-    disabled: saveDisabled,
-    style: {
-      marginTop: isMobile ? theme.spacing(1) : 'auto'
-    }
-  })));
+    },
+    children: [/*#__PURE__*/_jsx(Button, {
+      id: cancelID || 'cancelBottomBar',
+      size: "medium",
+      label: cancelButtonText,
+      onClick: onCancel,
+      priority: "secondary",
+      type: "passive",
+      style: {
+        marginTop: isMobile ? theme.spacing(1) : 'auto',
+        marginRight: theme.spacing(1)
+      }
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: isMobile ? 'column-reverse' : 'row'
+      },
+      children: [additionalRightButtons && additionalRightButtons.map(btn => /*#__PURE__*/_jsx(Button, {
+        id: btn.id,
+        priority: btn.buttonPriority,
+        type: btn.buttonType,
+        size: "medium",
+        label: btn.text,
+        onClick: btn.onClick,
+        disabled: btn.disabled,
+        style: {
+          marginTop: isMobile ? theme.spacing(1) : 'auto'
+        }
+      }, btn.id)), /*#__PURE__*/_jsx(Button, {
+        id: saveID || 'saveBottomBar',
+        size: "medium",
+        label: saveButtonText,
+        onClick: onSave,
+        disabled: saveDisabled,
+        style: {
+          marginTop: isMobile ? theme.spacing(1) : 'auto'
+        }
+      })]
+    })]
+  });
 }

package/components/Icon/Icon.js

@@ -1,24 +1,17 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Icon;
-var _react = _interopRequireDefault(require("react"));
-var _icons = _interopRequireDefault(require("./icons"));
-require("./styles.scss");
-function Icon(_ref) {
-  let {
-    size = 'small',
-    name,
-    className,
-    fillColor,
-    style
-  } = _ref;
-  const SVGComponent = _icons.default[name];
-  return /*#__PURE__*/_react.default.createElement(SVGComponent, {
-    className: "tw-icon tw-icon--".concat(size, " ").concat(className !== null && className !== void 0 ? className : ''),
+import React from 'react';
+import icons from './icons';
+import './styles.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Icon({
+  size = 'small',
+  name,
+  className,
+  fillColor,
+  style
+}) {
+  const SVGComponent = icons[name];
+  return /*#__PURE__*/_jsx(SVGComponent, {
+    className: `tw-icon tw-icon--${size} ${className ?? ''}`,
     fill: fillColor,
     style: style
   });