@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/components/Textfield/styles.scss

@@ -0,0 +1,271 @@
+@use 'sass:math';
+
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.textfield {
+  display: flex;
+  flex-flow: row wrap;
+
+  .textfield-label {
+    font-family: $tw-fnt-frm-fld-label-font-family;
+    font-size: $tw-fnt-frm-fld-label-font-size;
+    font-weight: $tw-fnt-frm-fld-label-font-weight;
+    line-height: $tw-fnt-frm-fld-label-line-height;
+    color: $tw-clr-txt-secondary;
+    margin-bottom: $tw-spc-base-xx-small;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .textfield-help-text {
+    font-family: $tw-fnt-frm-fld-help-text-font-family;
+    font-size: $tw-fnt-frm-fld-help-text-font-size;
+    font-weight: $tw-fnt-frm-fld-help-text-font-weight;
+    line-height: $tw-fnt-frm-fld-help-text-line-height;
+    color: $tw-clr-txt-secondary;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  textarea {
+    font-family: $tw-fnt-frm-fld-text-value-font-family;
+    font-size: $tw-fnt-frm-fld-text-value-font-size;
+    font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+    line-height: $tw-fnt-frm-fld-text-value-line-height;
+    color: $tw-clr-txt;
+    padding-top: 0;
+    padding-bottom: 0;
+    &::placeholder {
+      font-family: $tw-fnt-frm-fld-text-placeholder-font-family;
+      font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
+      font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
+      line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
+      color: $tw-clr-txt-tertiary;
+    }
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .textfield-value {
+    background-color: $tw-clr-bg;
+    border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+    padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
+    border-radius: $tw-sz-base-x-small;
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+
+    &:hover {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
+    }
+
+    &:active {
+      padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke-active};
+      border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-hover;
+      outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
+    }
+
+    &:focus-within {
+      padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke-active};
+      border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-hover;
+      outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
+      outline-offset: -$tw-sz-frm-fld-text-input-stroke-active;
+    }
+
+    input {
+      border: none;
+      width: 100%;
+      font-family: $tw-fnt-frm-fld-text-value-font-family;
+      font-size: $tw-fnt-frm-fld-text-value-font-size;
+      font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+      line-height: $tw-fnt-frm-fld-text-value-line-height;
+      color: $tw-clr-txt;
+      background: transparent;
+      padding-top: 0;
+      padding-bottom: 0;
+      &::placeholder {
+        font-family: $tw-fnt-frm-fld-text-placeholder-font-family;
+        font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
+        font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
+        line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
+        color: $tw-clr-txt-tertiary;
+      }
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    &--display {
+      font-family: $tw-fnt-frm-fld-text-value-font-family;
+      font-size: $tw-fnt-frm-fld-text-value-font-size;
+      font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+      line-height: $tw-fnt-frm-fld-text-value-line-height;
+      padding: $tw-spc-base-x-small 0;
+      margin: 0;
+
+      &.preserve-newlines {
+        white-space: pre-line;
+      }
+    }
+
+    &--disabled {
+      opacity: $tw-opcty-semantic-off;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+        outline: 0;
+        padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
+      }
+
+      &:focus-within {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+        outline: 0;
+      }
+    }
+
+    &--icon-container {
+      background: none;
+      border: 0;
+      padding: 0;
+    }
+
+    &--icon-right {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-icn-secondary;
+      margin-left: $tw-spc-base-x-small;
+      vertical-align: top;
+
+      &--cancel {
+        width: $tw-sz-base-small;
+        height: $tw-sz-base-small;
+        fill: $tw-clr-icn-secondary;
+        margin-left: $tw-spc-base-x-small;
+        margin-right: $tw-spc-base-xx-small;
+        vertical-align: top;
+      }
+    }
+
+    &--icon-left {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-icn-secondary;
+      margin-right: $tw-spc-base-x-small;
+      flex-shrink: 0;
+    }
+
+    &--error {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
+      background-color: $tw-clr-bg-danger-tertiary;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-hover;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
+        outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
+      }
+
+      &:focus-within {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
+        outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
+        outline-offset: -$tw-sz-frm-fld-text-input-stroke;
+      }
+    }
+
+    &--warning {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
+      background-color: $tw-clr-bg-warning-tertiary;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-hover;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
+        outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
+      }
+
+      &:focus-within {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
+        outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
+        outline-offset: -$tw-sz-frm-fld-text-input-stroke;
+      }
+    }
+
+    &--readonly {
+      background-color: $tw-clr-bg-secondary;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+        outline: 0;
+        padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
+      }
+
+      &:focus-within {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+        outline: 0;
+      }
+    }
+  }
+
+  .textfield-label-container {
+    display: flex;
+    width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  .textfield-error-text {
+    font-family: $tw-fnt-frm-fld-error-text-font-family;
+    font-size: $tw-fnt-frm-fld-error-text-font-size;
+    font-weight: $tw-fnt-frm-fld-error-text-font-weight;
+    line-height: $tw-fnt-frm-fld-error-text-line-height;
+    color: $tw-clr-txt-danger;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &--icon {
+      fill: $tw-clr-icn-danger;
+      width: $tw-fnt-frm-fld-error-text-line-height;
+      height: $tw-fnt-frm-fld-error-text-line-height;
+      margin-right: $tw-spc-base-x-small;
+    }
+  }
+
+  .textfield-warning-text {
+    font-family: $tw-fnt-frm-fld-warning-text-font-family;
+    font-size: $tw-fnt-frm-fld-warning-text-font-size;
+    font-weight: $tw-fnt-frm-fld-warning-text-font-weight;
+    line-height: $tw-fnt-frm-fld-warning-text-line-height;
+    color: $tw-clr-txt-warning;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &--icon {
+      fill: $tw-clr-icn-warning;
+      width: $tw-fnt-frm-fld-error-text-line-height;
+      height: $tw-fnt-frm-fld-error-text-line-height;
+      margin-right: $tw-spc-base-x-small;
+    }
+  }
+}

package/components/Tooltip/Tooltip.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Tooltip;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _utils = require("../../utils");
+function Tooltip(_ref) {
+  let {
+    placement = 'top-start',
+    title,
+    children
+  } = _ref;
+  const [open, setOpen] = _react.default.useState(false);
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
+  const theme = (0, _material.useTheme)();
+  const handleTooltipClose = () => {
+    setOpen(false);
+  };
+  const handleTooltipOpen = event => {
+    if (event.type === 'click' || event.type === 'mouseover' && !isMobile) {
+      setOpen(true);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    arrow: true,
+    onOpen: handleTooltipOpen,
+    onClose: handleTooltipClose,
+    open: open,
+    placement: placement,
+    sx: {
+      maxWidth: isMobile ? '342px' : '464px',
+      '& .MuiTooltip-arrow': {
+        color: theme.palette.TwClrBaseGray800
+      },
+      '& .MuiTooltip-tooltip': {
+        backgroundColor: theme.palette.TwClrBaseGray800,
+        color: theme.palette.TwClrBaseWhite,
+        padding: '8px',
+        '& a': {
+          color: theme.palette.TwClrBaseWhite
+        }
+      }
+    },
+    title: title
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: handleTooltipOpen
+  }, children));
+}

package/components/ViewPhotosDialog/index.js

@@ -0,0 +1,136 @@
+"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 = ViewPhotosDialog;
+var _react = _interopRequireWildcard(require("react"));
+var _reactMultiCarousel = _interopRequireDefault(require("react-multi-carousel"));
+require("react-multi-carousel/lib/styles.css");
+var _material = require("@mui/material");
+var _BusySpinner = _interopRequireDefault(require("../BusySpinner"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _DialogBox = _interopRequireDefault(require("../DialogBox/DialogBox"));
+require("./styles.scss");
+function ViewPhotosDialog(props) {
+  const {
+    onClose,
+    open,
+    photos,
+    initialSelectedSlide,
+    nextButtonLabel,
+    prevButtonLabel,
+    title,
+    numbered,
+    dots
+  } = props;
+  const [isPreviousDisabled, setIsPreviousDisabled] = (0, _react.useState)(false);
+  const [isNextDisabled, setIsNextDisabled] = (0, _react.useState)(false);
+  const [isLoading, setIsLoading] = (0, _react.useState)([]);
+  const [selectedSlide, setSelectedSlide] = (0, _react.useState)(initialSelectedSlide);
+  const myCarousel = (0, _react.useRef)(null);
+  const responsive = {
+    mobile: {
+      breakpoint: {
+        max: 4000,
+        min: 0
+      },
+      items: 1
+    }
+  };
+  const handleChange = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    setIsLoading(new Array(photos.length).fill(true));
+  }, [photos.length]);
+  (0, _react.useEffect)(() => {
+    setSelectedSlide(initialSelectedSlide);
+  }, [initialSelectedSlide]);
+  (0, _react.useEffect)(() => {
+    handleChange();
+  }, [open, handleChange]);
+  (0, _react.useEffect)(() => {
+    if (myCarousel.current) {
+      myCarousel.current.goToSlide(selectedSlide);
+    }
+  }, [selectedSlide]);
+  const finishLoading = index => {
+    const newIsLoading = [...isLoading];
+    newIsLoading[index] = false;
+    setIsLoading(newIsLoading);
+  };
+  return /*#__PURE__*/_react.default.createElement(_DialogBox.default, {
+    onClose: onClose,
+    open: open,
+    title: title,
+    size: "large",
+    scrolled: true,
+    middleButtons: [/*#__PURE__*/_react.default.createElement(_Button.default, {
+      label: prevButtonLabel,
+      priority: "secondary",
+      onClick: () => setSelectedSlide(slide => Math.max(0, slide - 1)),
+      key: "button-1",
+      disabled: isPreviousDisabled,
+      icon: "caretLeft"
+    }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      label: nextButtonLabel,
+      onClick: () => setSelectedSlide(slide => Math.min(photos.length - 1, slide + 1)),
+      key: "button-2",
+      disabled: isNextDisabled,
+      rightIcon: "caretRight"
+    })]
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      '& .react-multi-carousel-list': {
+        paddingBottom: '20px'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactMultiCarousel.default, {
+    responsive: responsive,
+    ref: myCarousel,
+    showDots: dots !== null && dots !== void 0 ? dots : true,
+    arrows: false,
+    ssr: true,
+    afterChange: handleChange
+  }, photos.map((p, i) => /*#__PURE__*/_react.default.createElement("div", {
+    key: "photo-".concat(i, "-container"),
+    className: "view-photos-dialog-container"
+  }, isLoading[i] ? /*#__PURE__*/_react.default.createElement(_BusySpinner.default, {
+    noBackground: true
+  }) : undefined, /*#__PURE__*/_react.default.createElement("a", {
+    href: p.url,
+    target: "blank"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "view-photos-dialog-image",
+    src: p.url,
+    alt: p.alt,
+    onLoad: () => finishLoading(i)
+  }))))), numbered ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    className: "photo-numbering"
+  }, "".concat(selectedSlide + 1, "/").concat(photos.length)) : undefined, photos[selectedSlide] && photos[selectedSlide].decoration));
+}

package/components/ViewPhotosDialog/styles.scss

@@ -0,0 +1,18 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+.view-photos-dialog-container {
+  min-height: 200px;
+  background: $tw-clr-bg;
+}
+
+.view-photos-dialog-image {
+  object-fit: contain;
+  margin: auto;
+  height: 400px;
+  width: 100%;
+}
+
+.photo-numbering {
+  font-size: 12px;
+  color: $tw-clr-txt-info;
+}

package/components/svg/BlobbyGrayIconImage.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+const SvgBlobbyGrayIconImage = _ref => {
+  let {
+    title,
+    titleId,
+    ...props
+  } = _ref;
+  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;

package/components/svg/BlobbyGrayIconImport.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+const SvgBlobbyGrayIconImport = _ref => {
+  let {
+    title,
+    titleId,
+    ...props
+  } = _ref;
+  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;

package/components/svg/BlobbyGrayIconUploadToTheCloud.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+const SvgBlobbyGrayIconUploadToTheCloud = _ref => {
+  let {
+    title,
+    titleId,
+    ...props
+  } = _ref;
+  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;