@bigbinary/neeto-molecules 3.3.12 → 3.3.13

package/dist/DeviceIncompatibilityMessage.js

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import React__default from 'react';
+import classnames from 'classnames';
+import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
+import Typography from '@bigbinary/neetoui/Typography';
+import { p as propTypes } from './index-e5588516.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _rect, _path, _g, _g2, _path2, _defs;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgScreenSize = function SvgScreenSize(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 86,
+    height: 59,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
+    x: 7.951,
+    y: 2.061,
+    width: 70.094,
+    height: 45.532,
+    rx: 4.394,
+    stroke: "#87929D",
+    strokeWidth: 4.121
+  })), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M28.871 32.02 57.34 16.708",
+    stroke: "#87929D",
+    strokeWidth: 3,
+    strokeLinecap: "round"
+  })), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#screen-size_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m57.46 21.788 1.798-5.97-5.969-1.798",
+    stroke: "#87929D",
+    strokeWidth: 2.088,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))), _g2 || (_g2 = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#screen-size_svg__b)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m28.525 27.162-1.37 6.093 6.093 1.37",
+    stroke: "#87929D",
+    strokeWidth: 2.092,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M3 56.355h80",
+    stroke: "#87929D",
+    strokeWidth: 4.121,
+    strokeLinecap: "round"
+  })), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "screen-size_svg__a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    transform: "rotate(-28.231 53.398 -92.874) skewX(-.001)",
+    d: "M0 0h11.137v11.137H0z"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "screen-size_svg__b"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    transform: "rotate(147.671 13.156 22.364) skewX(-.001)",
+    d: "M0 0h11.157v11.157H0z"
+  })))));
+};
+
+var DeviceIncompatibilityMessage = withT(function (_ref) {
+  var t = _ref.t,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames("mx-auto flex w-full max-w-80 flex-col items-center justify-center p-4", className),
+    children: [/*#__PURE__*/jsx(SvgScreenSize, {}), /*#__PURE__*/jsx(Typography, {
+      className: "neeto-ui-text-center mt-6",
+      "data-cy": "device-incompatibility-description",
+      "data-testid": "device-incompatibility-description",
+      style: "body2",
+      children: description || t("neetoMolecules.deviceIncompatibility.description")
+    })]
+  });
+});
+DeviceIncompatibilityMessage.propTypes = {
+  /**
+   * Additional classes to be added to the modal.
+   */
+  className: propTypes.exports.string,
+  /**
+   * To provide description.
+   */
+  description: propTypes.exports.node
+};
+var index = /*#__PURE__*/React__default.memo(DeviceIncompatibilityMessage);
+
+export { index as default };
+//# sourceMappingURL=DeviceIncompatibilityMessage.js.map

package/dist/DeviceIncompatibilityMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceIncompatibilityMessage.js","sources":["../src/assets/images/screen-size.svg","../src/components/DeviceIncompatibilityMessage/index.jsx"],"sourcesContent":["<svg width=\"86\" height=\"59\" viewBox=\"0 0 86 59\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"7.95124\" y=\"2.06061\" width=\"70.0943\" height=\"45.5319\" rx=\"4.39424\" stroke=\"#87929D\" stroke-width=\"4.12122\"/>\n<path d=\"M28.8711 32.0195L57.3394 16.7079\" stroke=\"#87929D\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n<g clip-path=\"url(#clip0_3430_7602)\">\n<path d=\"M57.4595 21.7876L59.2582 15.8183L53.2891 14.0195\" stroke=\"#87929D\" stroke-width=\"2.08795\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<g clip-path=\"url(#clip1_3430_7602)\">\n<path d=\"M28.5248 27.1616L27.1548 33.255L33.248 34.625\" stroke=\"#87929D\" stroke-width=\"2.09165\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<path d=\"M3 56.3555H83\" stroke=\"#87929D\" stroke-width=\"4.12122\" stroke-linecap=\"round\"/>\n<defs>\n<clipPath id=\"clip0_3430_7602\">\n<rect width=\"11.1368\" height=\"11.1369\" fill=\"white\" transform=\"matrix(0.88105 -0.473022 0.47301 0.881057 50.2832 14.2109)\"/>\n</clipPath>\n<clipPath id=\"clip1_3430_7602\">\n<rect width=\"11.1566\" height=\"11.1567\" fill=\"white\" transform=\"matrix(-0.844992 0.534779 -0.534767 -0.845 36.2324 34.2266)\"/>\n</clipPath>\n</defs>\n</svg>\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport ScreenSizeImage from \"assets/images/screen-size\";\n\nconst DeviceIncompatibilityMessage = withT(\n  ({ t, className = \"\", description = \"\" }) => (\n    <div\n      className={classnames(\n        \"mx-auto flex w-full max-w-80 flex-col items-center justify-center p-4\",\n        className\n      )}\n    >\n      <ScreenSizeImage />\n      <Typography\n        className=\"neeto-ui-text-center mt-6\"\n        data-cy=\"device-incompatibility-description\"\n        data-testid=\"device-incompatibility-description\"\n        style=\"body2\"\n      >\n        {description || t(\"neetoMolecules.deviceIncompatibility.description\")}\n      </Typography>\n    </div>\n  )\n);\n\nDeviceIncompatibilityMessage.propTypes = {\n  /**\n   * Additional classes to be added to the modal.\n   */\n  className: PropTypes.string,\n  /**\n   * To provide description.\n   */\n  description: PropTypes.node,\n};\n\nexport default React.memo(DeviceIncompatibilityMessage);\n"],"names":["DeviceIncompatibilityMessage","withT","_ref","t","_ref$className","className","_ref$description","description","_jsxs","classnames","children","_jsx","ScreenSizeImage","Typography","style","propTypes","PropTypes","string","node","React","memo"],"mappings":"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"}

package/dist/cjs/DeviceIncompatibilityMessage.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
+var Typography = require('@bigbinary/neetoui/Typography');
+var index$1 = require('./index-248c4f4c.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var withT__default = /*#__PURE__*/_interopDefaultLegacy(withT);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+
+var _rect, _path, _g, _g2, _path2, _defs;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgScreenSize = function SvgScreenSize(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 86,
+    height: 59,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
+    x: 7.951,
+    y: 2.061,
+    width: 70.094,
+    height: 45.532,
+    rx: 4.394,
+    stroke: "#87929D",
+    strokeWidth: 4.121
+  })), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M28.871 32.02 57.34 16.708",
+    stroke: "#87929D",
+    strokeWidth: 3,
+    strokeLinecap: "round"
+  })), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#screen-size_svg__a)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m57.46 21.788 1.798-5.97-5.969-1.798",
+    stroke: "#87929D",
+    strokeWidth: 2.088,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))), _g2 || (_g2 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#screen-size_svg__b)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m28.525 27.162-1.37 6.093 6.093 1.37",
+    stroke: "#87929D",
+    strokeWidth: 2.092,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M3 56.355h80",
+    stroke: "#87929D",
+    strokeWidth: 4.121,
+    strokeLinecap: "round"
+  })), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "screen-size_svg__a"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#fff",
+    transform: "rotate(-28.231 53.398 -92.874) skewX(-.001)",
+    d: "M0 0h11.137v11.137H0z"
+  })), /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "screen-size_svg__b"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#fff",
+    transform: "rotate(147.671 13.156 22.364) skewX(-.001)",
+    d: "M0 0h11.157v11.157H0z"
+  })))));
+};
+
+var DeviceIncompatibilityMessage = withT__default["default"](function (_ref) {
+  var t = _ref.t,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classnames__default["default"]("mx-auto flex w-full max-w-80 flex-col items-center justify-center p-4", className),
+    children: [/*#__PURE__*/jsxRuntime.jsx(SvgScreenSize, {}), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-center mt-6",
+      "data-cy": "device-incompatibility-description",
+      "data-testid": "device-incompatibility-description",
+      style: "body2",
+      children: description || t("neetoMolecules.deviceIncompatibility.description")
+    })]
+  });
+});
+DeviceIncompatibilityMessage.propTypes = {
+  /**
+   * Additional classes to be added to the modal.
+   */
+  className: index$1.propTypes.exports.string,
+  /**
+   * To provide description.
+   */
+  description: index$1.propTypes.exports.node
+};
+var index = /*#__PURE__*/React__default["default"].memo(DeviceIncompatibilityMessage);
+
+module.exports = index;
+//# sourceMappingURL=DeviceIncompatibilityMessage.js.map

package/dist/cjs/DeviceIncompatibilityMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceIncompatibilityMessage.js","sources":["../../src/assets/images/screen-size.svg","../../src/components/DeviceIncompatibilityMessage/index.jsx"],"sourcesContent":["<svg width=\"86\" height=\"59\" viewBox=\"0 0 86 59\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"7.95124\" y=\"2.06061\" width=\"70.0943\" height=\"45.5319\" rx=\"4.39424\" stroke=\"#87929D\" stroke-width=\"4.12122\"/>\n<path d=\"M28.8711 32.0195L57.3394 16.7079\" stroke=\"#87929D\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n<g clip-path=\"url(#clip0_3430_7602)\">\n<path d=\"M57.4595 21.7876L59.2582 15.8183L53.2891 14.0195\" stroke=\"#87929D\" stroke-width=\"2.08795\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<g clip-path=\"url(#clip1_3430_7602)\">\n<path d=\"M28.5248 27.1616L27.1548 33.255L33.248 34.625\" stroke=\"#87929D\" stroke-width=\"2.09165\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<path d=\"M3 56.3555H83\" stroke=\"#87929D\" stroke-width=\"4.12122\" stroke-linecap=\"round\"/>\n<defs>\n<clipPath id=\"clip0_3430_7602\">\n<rect width=\"11.1368\" height=\"11.1369\" fill=\"white\" transform=\"matrix(0.88105 -0.473022 0.47301 0.881057 50.2832 14.2109)\"/>\n</clipPath>\n<clipPath id=\"clip1_3430_7602\">\n<rect width=\"11.1566\" height=\"11.1567\" fill=\"white\" transform=\"matrix(-0.844992 0.534779 -0.534767 -0.845 36.2324 34.2266)\"/>\n</clipPath>\n</defs>\n</svg>\n","import React from \"react\";\n\nimport classnames from \"classnames\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport ScreenSizeImage from \"assets/images/screen-size\";\n\nconst DeviceIncompatibilityMessage = withT(\n  ({ t, className = \"\", description = \"\" }) => (\n    <div\n      className={classnames(\n        \"mx-auto flex w-full max-w-80 flex-col items-center justify-center p-4\",\n        className\n      )}\n    >\n      <ScreenSizeImage />\n      <Typography\n        className=\"neeto-ui-text-center mt-6\"\n        data-cy=\"device-incompatibility-description\"\n        data-testid=\"device-incompatibility-description\"\n        style=\"body2\"\n      >\n        {description || t(\"neetoMolecules.deviceIncompatibility.description\")}\n      </Typography>\n    </div>\n  )\n);\n\nDeviceIncompatibilityMessage.propTypes = {\n  /**\n   * Additional classes to be added to the modal.\n   */\n  className: PropTypes.string,\n  /**\n   * To provide description.\n   */\n  description: PropTypes.node,\n};\n\nexport default React.memo(DeviceIncompatibilityMessage);\n"],"names":["React","DeviceIncompatibilityMessage","withT","_ref","t","_ref$className","className","_ref$description","description","_jsxs","classnames","children","_jsx","ScreenSizeImage","Typography","style","propTypes","PropTypes","string","node","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAI,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC;AACzC,SAAS,QAAQ,GAAG,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,UAAU,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,IAAI,MAAM,EAAE,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE;AAEnV,IAAI,aAAa,GAAG,SAAS,aAAa,CAAC,KAAK,EAAE;AAClD,EAAE,oBAAoBA,gBAAK,CAAC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;AAC1D,IAAI,KAAK,EAAE,EAAE;AACb,IAAI,MAAM,EAAE,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,KAAK,EAAE,4BAA4B;AACvC,GAAG,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,KAAK,gBAAgBA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACxE,IAAI,CAAC,EAAE,KAAK;AACZ,IAAI,CAAC,EAAE,KAAK;AACZ,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,MAAM,EAAE,MAAM;AAClB,IAAI,EAAE,EAAE,KAAK;AACb,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,WAAW,EAAE,KAAK;AACtB,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,gBAAgBA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAClE,IAAI,CAAC,EAAE,4BAA4B;AACnC,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,WAAW,EAAE,CAAC;AAClB,IAAI,aAAa,EAAE,OAAO;AAC1B,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,gBAAgBA,gBAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AACzD,IAAI,QAAQ,EAAE,0BAA0B;AACxC,GAAG,eAAeA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC9C,IAAI,CAAC,EAAE,sCAAsC;AAC7C,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,WAAW,EAAE,KAAK;AACtB,IAAI,aAAa,EAAE,OAAO;AAC1B,IAAI,cAAc,EAAE,OAAO;AAC3B,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,gBAAgBA,gBAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AAC5D,IAAI,QAAQ,EAAE,0BAA0B;AACxC,GAAG,eAAeA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC9C,IAAI,CAAC,EAAE,sCAAsC;AAC7C,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,WAAW,EAAE,KAAK;AACtB,IAAI,aAAa,EAAE,OAAO;AAC1B,IAAI,cAAc,EAAE,OAAO;AAC3B,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,gBAAgBA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACrE,IAAI,CAAC,EAAE,cAAc;AACrB,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,WAAW,EAAE,KAAK;AACtB,IAAI,aAAa,EAAE,OAAO;AAC1B,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,gBAAgBA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,eAAeA,gBAAK,CAAC,aAAa,CAAC,UAAU,EAAE;AACrH,IAAI,EAAE,EAAE,oBAAoB;AAC5B,GAAG,eAAeA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC9C,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,SAAS,EAAE,6CAA6C;AAC5D,IAAI,CAAC,EAAE,uBAAuB;AAC9B,GAAG,CAAC,CAAC,eAAeA,gBAAK,CAAC,aAAa,CAAC,UAAU,EAAE;AACpD,IAAI,EAAE,EAAE,oBAAoB;AAC5B,GAAG,eAAeA,gBAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AAC9C,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,SAAS,EAAE,4CAA4C;AAC3D,IAAI,CAAC,EAAE,uBAAuB;AAC9B,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACT,CAAC;;AC/CD,IAAMC,4BAA4B,GAAGC,yBAAK,CACxC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,CAAC,GAAAD,IAAA,CAADC,CAAC;IAAAC,cAAA,GAAAF,IAAA,CAAEG,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IAAAE,gBAAA,GAAAJ,IAAA,CAAEK,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,gBAAA,CAAA;AAAA,EAAA,oBACpCE,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,8BAAU,CACnB,uEAAuE,EACvEJ,SACF,CAAE;IAAAK,QAAA,EAAA,cAEFC,cAAA,CAACC,aAAe,IAAE,CAAC,eACnBD,cAAA,CAACE,8BAAU,EAAA;AACTR,MAAAA,SAAS,EAAC,2BAA2B;AACrC,MAAA,SAAA,EAAQ,oCAAoC;AAC5C,MAAA,aAAA,EAAY,oCAAoC;AAChDS,MAAAA,KAAK,EAAC,OAAO;AAAAJ,MAAAA,QAAA,EAEZH,WAAW,IAAIJ,CAAC,CAAC,kDAAkD,CAAA;AAAC,KAC3D,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAAA,CAEV,CAAC,CAAA;AAEDH,4BAA4B,CAACe,SAAS,GAAG;AACvC;AACF;AACA;EACEV,SAAS,EAAEW,yBAAS,CAACC,MAAM;AAC3B;AACF;AACA;EACEV,WAAW,EAAES,yBAAS,CAACE,IAAAA;AACzB,CAAC,CAAA;AAED,YAAA,aAAenB,yBAAK,CAACoB,IAAI,CAACnB,4BAA4B,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "3.3.12",
+  "version": "3.3.13",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/src/translations/en.json

@@ -735,6 +735,9 @@
         "oneFileAllowed": "Please upload only 1 file",
         "chooseFileOrDragHere": "Choose file or drag here"
       }
+    },
+    "deviceIncompatibility": {
+      "description": "The design tab is currently not supported in this screen size. Please switch to a screen larger than 768px wide."
     }
   }
 }

package/types/DeviceIncompatibilityMessage.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+/**
+ *
+ * Used to indicate screen incompatibility on smaller devices.
+ *
+ * @example 
+ *
+ * import DeviceIncompatibilityMessage from "@bigbinary/neeto-molecules/DeviceIncompatibilityMessage";
+ * 
+ * const App = () => <DeviceIncompatibilityMessage />;
+ * @endexample
+*/
+const DeviceIncompatibilityMessage: React.FC<{
+  description?: React.ReactNode;
+  className?: string;
+}>;
+export default DeviceIncompatibilityMessage;