@terraware/web-components 1.0.6 → 1.0.9

package/components/ErrorBox/ErrorBox.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './styles.scss';
+export interface Props {
+    text: string;
+    onClick?: () => void;
+    buttonText?: string;
+    title?: string;
+    className?: string;
+}
+export default function ErrorBox(props: Props): JSX.Element;
+//# sourceMappingURL=ErrorBox.d.ts.map

package/components/ErrorBox/ErrorBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBox.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBox/ErrorBox.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoB1D"}

package/components/ErrorBox/ErrorBox.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ErrorBox;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+var _useDeviceInfo2 = _interopRequireDefault(require("../../utils/useDeviceInfo"));
+
+require("./styles.scss");
+
+function ErrorBox(props) {
+  var text = props.text,
+      onClick = props.onClick,
+      buttonText = props.buttonText,
+      title = props.title,
+      className = props.className;
+
+  var _useDeviceInfo = (0, _useDeviceInfo2.default)(),
+      isMobile = _useDeviceInfo.isMobile;
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "error-box ".concat(className, " ").concat(isMobile ? 'mobile' : '')
+  }, /*#__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
+  })));
+}

package/components/ErrorBox/styles.scss

@@ -0,0 +1,63 @@
+@import '../../style-dictionary-dist/textfield_variables.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.error-box {
+  display: flex;
+  width: 60%;
+  margin-top: $tw-spc-base-xx-small;
+  background: $tw-clr-base-red-050;
+  padding: 16px;
+  margin: 0 auto;
+  border: 1px solid $tw-clr-icon-fill-critical;
+  border-radius: 8px;
+  flex-direction: column;
+
+  &--container {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &.mobile {
+    width: 100%;
+  }
+}
+
+.error-text {
+  font-family: $tw-fnt-frm-fld-error-text-font-family;
+  font-size: $tw-fnt-base-font-size-body-02;
+  font-weight: $tw-fnt-frm-fld-error-text-font-weight;
+  line-height: $tw-fnt-frm-fld-error-text-line-height;
+  color: $tw-clr-text-fill;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.error-title {
+  font-family: $tw-fnt-frm-fld-error-text-font-family;
+  font-size: $tw-fnt-base-font-size-body-02;
+  font-weight: $tw-fnt-base-headline-01-semi-bold-font-weight;
+  line-height: $tw-fnt-frm-fld-error-text-line-height;
+  color: $tw-clr-text-fill;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-top: 0;
+}
+
+.button-container {
+  width: 100%;
+  text-align: right;
+  margin-top: 16px;
+}
+
+.error-icon {
+  fill: $tw-clr-frm-fld-error-text;
+  margin-right: $tw-spc-base-x-small;
+}

package/components/Icon/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/icons/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8D1B,oBAAY,QAAQ,GAChB,gCAAgC,GAChC,oBAAoB,GACpB,iBAAiB,GACjB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,KAAK,GACL,UAAU,GACV,QAAQ,GACR,WAAW,GACX,WAAW,GACX,SAAS,GACT,iBAAiB,GACjB,WAAW,GACX,aAAa,GACb,WAAW,GACX,OAAO,GACP,UAAU,GACV,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,UAAU,GACV,MAAM,GACN,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,GACN,cAAc,GACd,YAAY,GACZ,eAAe,GACf,cAAc,GACd,cAAc,GACd,iBAAiB,GACjB,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,MAAM,GACN,iBAAiB,GACjB,QAAQ,GACR,UAAU,GACV,aAAa,GACb,OAAO,GACP,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,GACT,SAAS,GACT,aAAa,GACb,aAAa,GACb,SAAS,GACT,MAAM,CAAC;AAEX,aAAK,YAAY,GAAG,KAAK,CAAC,iBAAiB,CACzC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,CACF,CAAC;AACF,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,YAAY,CAyDzC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/icons/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4D1B,oBAAY,QAAQ,GAChB,gCAAgC,GAChC,oBAAoB,GACpB,iBAAiB,GACjB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,KAAK,GACL,UAAU,GACV,QAAQ,GACR,WAAW,GACX,WAAW,GACX,SAAS,GACT,iBAAiB,GACjB,WAAW,GACX,aAAa,GACb,WAAW,GACX,OAAO,GACP,UAAU,GACV,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,UAAU,GACV,MAAM,GACN,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,GACN,cAAc,GACd,YAAY,GACZ,eAAe,GACf,cAAc,GACd,cAAc,GACd,iBAAiB,GACjB,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,MAAM,GACN,iBAAiB,GACjB,QAAQ,GACR,UAAU,GACV,aAAa,GACb,OAAO,GACP,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,GACT,SAAS,GACT,aAAa,GACb,aAAa,GACb,SAAS,GACT,MAAM,CAAC;AAEX,aAAK,YAAY,GAAG,KAAK,CAAC,iBAAiB,CACzC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,CACF,CAAC;AACF,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,YAAY,CAyDzC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Icon/icons/index.js

@@ -7,115 +7,115 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _BlobbyGrayIconUploadToTheCloud = _interopRequireDefault(require("./assets/BlobbyGrayIconUploadToTheCloud"));
+var _BlobbyGrayIconUploadToTheCloud = _interopRequireDefault(require("../../svg/BlobbyGrayIconUploadToTheCloud"));
 
-var _BlobbyIconHappy = _interopRequireDefault(require("./assets/BlobbyIconHappy"));
+var _BlobbyIconHappy = _interopRequireDefault(require("../../svg/BlobbyIconHappy"));
 
-var _BlobbyIconLeaf = _interopRequireDefault(require("./assets/BlobbyIconLeaf"));
+var _BlobbyIconLeaf = _interopRequireDefault(require("../../svg/BlobbyIconLeaf"));
 
-var _BlobbyIconLibrary = _interopRequireDefault(require("./assets/BlobbyIconLibrary"));
+var _BlobbyIconLibrary = _interopRequireDefault(require("../../svg/BlobbyIconLibrary"));
 
-var _BlobbyIconSeedBank = _interopRequireDefault(require("./assets/BlobbyIconSeedBank"));
+var _BlobbyIconSeedBank = _interopRequireDefault(require("../../svg/BlobbyIconSeedBank"));
 
-var _BlobbyIconWrench = _interopRequireDefault(require("./assets/BlobbyIconWrench"));
+var _BlobbyIconWrench = _interopRequireDefault(require("../../svg/BlobbyIconWrench"));
 
-var _BlobbyIconHeartMonitor = _interopRequireDefault(require("./assets/BlobbyIconHeartMonitor"));
+var _Bug = _interopRequireDefault(require("../../svg/Bug"));
 
-var _BlobbyIconOrganization = _interopRequireDefault(require("./assets/BlobbyIconOrganization"));
+var _Calendar = _interopRequireDefault(require("../../svg/Calendar"));
 
-var _BlobbyIconPeople = _interopRequireDefault(require("./assets/BlobbyIconPeople"));
+var _IconCancel = _interopRequireDefault(require("../../svg/IconCancel"));
 
-var _Bug = _interopRequireDefault(require("./assets/Bug"));
+var _CaretDown = _interopRequireDefault(require("../../svg/CaretDown"));
 
-var _Calendar = _interopRequireDefault(require("./assets/Calendar"));
+var _CaretLeft = _interopRequireDefault(require("../../svg/CaretLeft"));
 
-var _CaretDown = _interopRequireDefault(require("./assets/CaretDown"));
+var _CaretUp = _interopRequireDefault(require("../../svg/CaretUp"));
 
-var _CaretLeft = _interopRequireDefault(require("./assets/CaretLeft"));
+var _IconChargingBattery = _interopRequireDefault(require("../../svg/IconChargingBattery"));
 
-var _CaretUp = _interopRequireDefault(require("./assets/CaretUp"));
+var _IconCheckmark = _interopRequireDefault(require("../../svg/IconCheckmark"));
 
-var _ChevronDown = _interopRequireDefault(require("./assets/ChevronDown"));
+var _ChevronDown = _interopRequireDefault(require("../../svg/ChevronDown"));
 
-var _ChevronUp = _interopRequireDefault(require("./assets/ChevronUp"));
+var _ChevronUp = _interopRequireDefault(require("../../svg/ChevronUp"));
 
-var _Close = _interopRequireDefault(require("./assets/Close"));
+var _Close = _interopRequireDefault(require("../../svg/Close"));
 
-var _Critical = _interopRequireDefault(require("./assets/Critical"));
+var _Critical = _interopRequireDefault(require("../../svg/Critical"));
 
-var _Edit = _interopRequireDefault(require("./assets/Edit"));
+var _IconDashboard = _interopRequireDefault(require("../../svg/IconDashboard"));
 
-var _Error = _interopRequireDefault(require("./assets/Error"));
+var _Edit = _interopRequireDefault(require("../../svg/Edit"));
 
-var _Export = _interopRequireDefault(require("./assets/Export"));
+var _Error = _interopRequireDefault(require("../../svg/Error"));
 
-var _Filter = _interopRequireDefault(require("./assets/Filter"));
+var _Export = _interopRequireDefault(require("../../svg/Export"));
 
-var _Folder = _interopRequireDefault(require("./assets/Folder"));
+var _Filter = _interopRequireDefault(require("../../svg/Filter"));
 
-var _Help = _interopRequireDefault(require("./assets/Help"));
+var _Folder = _interopRequireDefault(require("../../svg/Folder"));
 
-var _Home = _interopRequireDefault(require("./assets/Home"));
+var _Help = _interopRequireDefault(require("../../svg/Help"));
 
-var _IconCancel = _interopRequireDefault(require("./assets/IconCancel"));
+var _Home = _interopRequireDefault(require("../../svg/Home"));
 
-var _IconChargingBattery = _interopRequireDefault(require("./assets/IconChargingBattery"));
+var _IconMenu = _interopRequireDefault(require("../../svg/IconMenu"));
 
-var _IconCheckmark = _interopRequireDefault(require("./assets/IconCheckmark"));
+var _Info = _interopRequireDefault(require("../../svg/Info"));
 
-var _IconDashboard = _interopRequireDefault(require("./assets/IconDashboard"));
+var _Key = _interopRequireDefault(require("../../svg/Key"));
 
-var _IconHeartMonitor = _interopRequireDefault(require("./assets/IconHeartMonitor"));
+var _Leaf = _interopRequireDefault(require("../../svg/Leaf"));
 
-var _IconMail = _interopRequireDefault(require("./assets/IconMail"));
+var _Lock = _interopRequireDefault(require("../../svg/Lock"));
 
-var _IconManager = _interopRequireDefault(require("./assets/IconManager"));
+var _MenuVertical = _interopRequireDefault(require("../../svg/MenuVertical"));
 
-var _IconMenu = _interopRequireDefault(require("./assets/IconMenu"));
+var _BlobbyIconHeartMonitor = _interopRequireDefault(require("../../svg/BlobbyIconHeartMonitor"));
 
-var _IconOrg = _interopRequireDefault(require("./assets/IconOrg"));
+var _IconHeartMonitor = _interopRequireDefault(require("../../svg/IconHeartMonitor"));
 
-var _IconSeedBank = _interopRequireDefault(require("./assets/IconSeedBank"));
+var _IconMail = _interopRequireDefault(require("../../svg/IconMail"));
 
-var _IconWifi = _interopRequireDefault(require("./assets/IconWifi"));
+var _Notification = _interopRequireDefault(require("../../svg/Notification"));
 
-var _Info = _interopRequireDefault(require("./assets/Info"));
+var _BlobbyIconOrganization = _interopRequireDefault(require("../../svg/BlobbyIconOrganization"));
 
-var _Key = _interopRequireDefault(require("./assets/Key"));
+var _IconOrg = _interopRequireDefault(require("../../svg/IconOrg"));
 
-var _Leaf = _interopRequireDefault(require("./assets/Leaf"));
+var _BlobbyIconPeople = _interopRequireDefault(require("../../svg/BlobbyIconPeople"));
 
-var _Lock = _interopRequireDefault(require("./assets/Lock"));
+var _IconManager = _interopRequireDefault(require("../../svg/IconManager"));
 
-var _MenuVertical = _interopRequireDefault(require("./assets/MenuVertical"));
+var _Person = _interopRequireDefault(require("../../svg/Person"));
 
-var _Notification = _interopRequireDefault(require("./assets/Notification"));
+var _Plus = _interopRequireDefault(require("../../svg/Plus"));
 
-var _Person = _interopRequireDefault(require("./assets/Person"));
+var _RestorationSite = _interopRequireDefault(require("../../svg/RestorationSite"));
 
-var _Plus = _interopRequireDefault(require("./assets/Plus"));
+var _Search = _interopRequireDefault(require("../../svg/Search"));
 
-var _RestorationSite = _interopRequireDefault(require("./assets/RestorationSite"));
+var _IconSeedBank = _interopRequireDefault(require("../../svg/IconSeedBank"));
 
-var _Search = _interopRequireDefault(require("./assets/Search"));
+var _Seeds = _interopRequireDefault(require("../../svg/Seeds"));
 
-var _Seeds = _interopRequireDefault(require("./assets/Seeds"));
+var _Sparkles = _interopRequireDefault(require("../../svg/Sparkles"));
 
-var _Sparkles = _interopRequireDefault(require("./assets/Sparkles"));
+var _Species = _interopRequireDefault(require("../../svg/Species"));
 
-var _Species = _interopRequireDefault(require("./assets/Species"));
+var _Species2 = _interopRequireDefault(require("../../svg/Species2"));
 
-var _Species2 = _interopRequireDefault(require("./assets/Species2"));
+var _Spinner = _interopRequireDefault(require("../../svg/Spinner"));
 
-var _Spinner = _interopRequireDefault(require("./assets/Spinner"));
+var _Success = _interopRequireDefault(require("../../svg/Success"));
 
-var _Success = _interopRequireDefault(require("./assets/Success"));
+var _Touchscreen = _interopRequireDefault(require("../../svg/Touchscreen"));
 
-var _Touchscreen = _interopRequireDefault(require("./assets/Touchscreen"));
+var _UploadCloud = _interopRequireDefault(require("../../svg/UploadCloud"));
 
-var _UploadCloud = _interopRequireDefault(require("./assets/UploadCloud"));
+var _Warning = _interopRequireDefault(require("../../svg/Warning"));
 
-var _Warning = _interopRequireDefault(require("./assets/Warning"));
+var _IconWifi = _interopRequireDefault(require("../../svg/IconWifi"));
 
 var icons = {
   blobbyGrayIconUploadToTheCloud: _BlobbyGrayIconUploadToTheCloud.default,

package/components/Message/Message.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import './styles.scss';
+export interface Props {
+    type: 'page' | 'toast';
+    priority: 'info' | 'critical' | 'warning' | 'success';
+    title?: string | string[];
+    body: string | string[];
+    actionText?: string;
+    actionHandler?: () => void;
+    pageButtons?: JSX.Element[];
+    showCloseButton?: boolean;
+    onClose?: () => void;
+    open: boolean;
+}
+export default function Message(props: Props): JSX.Element | null;
+//# sourceMappingURL=Message.d.ts.map

package/components/Message/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AAKvB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAyDhE"}

package/components/Message/Message.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Message;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./styles.scss");
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+var _material = require("@mui/material");
+
+var _utils = require("../../utils");
+
+function Message(props) {
+  var type = props.type,
+      priority = props.priority,
+      title = props.title,
+      body = props.body,
+      actionText = props.actionText,
+      actionHandler = props.actionHandler,
+      pageButtons = props.pageButtons,
+      showCloseButton = props.showCloseButton,
+      onClose = props.onClose,
+      open = props.open;
+
+  var _useDeviceInfo = (0, _utils.useDeviceInfo)(),
+      isMobile = _useDeviceInfo.isMobile;
+
+  return /*#__PURE__*/_react.default.createElement(_material.Snackbar, {
+    anchorOrigin: {
+      vertical: isMobile ? 'bottom' : 'top',
+      horizontal: 'center'
+    },
+    open: open,
+    onClose: onClose,
+    autoHideDuration: 5000,
+    sx: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message tw-message--".concat(type, " tw-message--").concat(priority)
+  }, type === 'toast' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--left-side"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: priority,
+    className: "left-side--icon"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--main-content"
+  }, type === 'page' && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: priority,
+    className: "main-content--icon"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--main-body"
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--title-container"
+  }, /*#__PURE__*/_react.default.createElement("h1", null, title)), /*#__PURE__*/_react.default.createElement("h2", null, body), type === 'page' && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "tw-message--actions-container"
+  }, pageButtons === null || pageButtons === void 0 ? void 0 : pageButtons.map(function (pageButton, index) {
+    var pageButtonWithKey = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton), {}, {
+      key: "page-button-".concat(index),
+      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageButton.props), {}, {
+        size: pageButton.props.size || 'medium'
+      })
+    });
+    return pageButtonWithKey;
+  })) : null)), type === 'toast' && actionText ? /*#__PURE__*/_react.default.createElement("button", {
+    onClick: actionHandler,
+    className: "tw-message--action-text"
+  }, actionText) : showCloseButton ? /*#__PURE__*/_react.default.createElement("button", {
+    onClick: onClose,
+    className: "icon-container"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    className: "page-message--close-icon"
+  })) : null)));
+}

package/components/Message/styles.scss

@@ -0,0 +1,190 @@
+@import '../../style-dictionary-dist/message_variables.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+
+.tw-message {
+  &.tw-message--page {
+    width: 584px;
+    &.tw-message--container {
+      margin: $tw-spc-base-small 0;
+    }
+    &.tw-message--title-container {
+      display: flex;
+    }
+  }
+
+  border-radius: $tw-sz-base-x-small;
+  display: flex;
+
+  width: 480px;
+  &--container {
+    margin: $tw-spc-base-small;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  &--title-container {
+    h1 {
+      font-family: $tw-fnt-mssg-title-font-family;
+      font-size: $tw-fnt-mssg-title-font-size;
+      font-weight: $tw-fnt-mssg-title-font-weight;
+      line-height: $tw-fnt-mssg-title-line-height;
+      color: $tw-clr-text-fill;
+      padding: 0;
+      margin: 0 0 $tw-spc-base-x-small 0;
+    }
+  }
+
+  &--main-content {
+    display: flex;
+    width: 100%;
+    
+    h2 {
+      font-family: $tw-fnt-mssg-body-font-family;
+      font-size: $tw-fnt-mssg-body-font-size;
+      font-weight: $tw-fnt-mssg-body-font-weight;
+      line-height: $tw-fnt-mssg-body-line-height;
+      color: $tw-clr-text-fill;
+      padding: 0;
+      margin: 0;
+    }
+
+    .main-content--icon {
+      width: $tw-sz-base-medium;
+      height: $tw-sz-base-medium;
+      margin-right: $tw-spc-base-small;
+    }
+  }
+
+  &--main-body {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &--actions-container {
+    align-self: end;
+
+    button:first-child {
+      margin-right: $tw-spc-base-x-small;
+    }
+  }
+
+  &--action-text {
+    font-family: $tw-fnt-mssg-body-font-family;
+    font-size: $tw-fnt-mssg-body-font-size;
+    font-weight: $tw-fnt-mssg-body-font-weight;
+    line-height: $tw-fnt-mssg-body-line-height;
+    color: $tw-clr-text-fill-productive;
+    margin-left: $tw-spc-base-x-small;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    height: fit-content;
+  }
+
+  &--left-side {
+    padding: $tw-spc-base-small $tw-spc-base-small 0 $tw-spc-base-small;
+    .left-side--icon {
+      fill: $tw-clr-icon-fill-text-inv;
+      width: $tw-sz-base-medium;
+      height: $tw-sz-base-medium;
+    }
+  }
+
+  .toast-message--close-icon {
+    margin-left: $tw-spc-base-x-small;
+    fill: $tw-clr-icon-fill-passive;
+    width: $tw-sz-base-medium;
+    height: $tw-sz-base-medium;
+  }
+
+  .page-message--close-icon {
+    margin-left: $tw-spc-base-x-small;
+    fill: $tw-clr-icon-fill-passive;
+    width: $tw-sz-base-medium;
+    height: $tw-sz-base-medium;
+  }
+  
+  .icon-container {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    height: fit-content;
+  }
+
+  &--info {
+    &.tw-message--page {
+      border: 1px solid $tw-clr-base-semantic-passive;
+      background-color: $tw-clr-base-semantic-passive-bg;
+      .main-content--icon {
+        fill:$tw-clr-base-semantic-passive;
+      }
+    }
+    border: 1px solid $tw-clr-icon-fill-passive;
+    &.tw-message--toast {
+    box-shadow: 0 2px $tw-clr-icon-fill-passive;
+    }
+    .tw-message--left-side {
+      background-color: $tw-clr-icon-fill-passive;
+    }
+  }
+
+  &--critical {
+    &.tw-message--page {
+      border: 1px solid $tw-clr-base-semantic-critical;
+      background-color: $tw-clr-base-semantic-critical-bg;
+
+      .main-content--icon {
+        fill: $tw-clr-base-semantic-critical
+      }
+    }
+    border: 1px solid $tw-clr-icon-fill-critical;
+    &.tw-message--toast {
+    box-shadow: 0 2px $tw-clr-icon-fill-critical;
+    }
+    .tw-message--left-side {
+      background-color: $tw-clr-icon-fill-critical;
+    }
+  }
+
+  &--warning {
+    &.tw-message--page {
+      border: 1px solid $tw-clr-base-semantic-warning;
+      background-color: $tw-clr-base-semantic-warning-bg;
+
+      .main-content--icon {
+        fill: $tw-clr-base-semantic-warning;
+      }
+    }
+    border: 1px solid $tw-clr-icon-fill-warning;
+    &.tw-message--toast {
+    box-shadow: 0 2px $tw-clr-icon-fill-warning;
+    }
+    .tw-message--left-side {
+      background-color: $tw-clr-icon-fill-warning;
+    }
+  }
+
+  &--success {
+    &.tw-message--page {
+      border: 1px solid $tw-clr-base-semantic-success;
+      background-color: $tw-clr-base-semantic-success-bg;
+
+      .main-content--icon {
+        fill: $tw-clr-base-semantic-success;
+      }
+    }
+    border: 1px solid $tw-clr-icon-fill-success;
+    &.tw-message--toast {
+    box-shadow: 0 2px $tw-clr-icon-fill-success;
+    }
+    .tw-message--left-side {
+      background-color: $tw-clr-icon-fill-success;
+    }
+  }
+}

package/components/Navbar/Navbar.js

@@ -9,7 +9,7 @@ exports.default = Navbar;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _logo = require("./logo.svg");
+var _svg = require("../svg");
 
 require("./styles.scss");
 
@@ -50,7 +50,7 @@ function Navbar(props) {
     className: "navbar"
   }, isDesktop ? /*#__PURE__*/_react.default.createElement("div", {
     className: "logo"
-  }, /*#__PURE__*/_react.default.createElement(_logo.ReactComponent, null)) : /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_svg.Logo, null)) : /*#__PURE__*/_react.default.createElement("div", {
     className: classes.navBarTop
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {

package/components/svg/BlobbyGrayIconUploadToTheCloud.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlobbyGrayIconUploadToTheCloud.d.ts","sourceRoot":"","sources":["../../../src/components/svg/BlobbyGrayIconUploadToTheCloud.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,iCAAiC,iCAAkC,SAAS,aAAa,CAAC,GAAG,SAAS,gBAc3G,CAAC;AAEF,eAAe,iCAAiC,CAAC"}

package/components/svg/BlobbyIconHappy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlobbyIconHappy.d.ts","sourceRoot":"","sources":["../../../src/components/svg/BlobbyIconHappy.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,kBAAkB,iCAAkC,SAAS,aAAa,CAAC,GAAG,SAAS,gBAgG5F,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/svg/BlobbyIconHeartMonitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlobbyIconHeartMonitor.d.ts","sourceRoot":"","sources":["../../../src/components/svg/BlobbyIconHeartMonitor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,yBAAyB,iCAAkC,SAAS,aAAa,CAAC,GAAG,SAAS,gBAgGnG,CAAC;AAEF,eAAe,yBAAyB,CAAC"}