kiva-protocol-ui-kit 1.0.37 → 1.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +8 -19
- package/build/index.esm.js.map +1 -1
- package/build/index.js +7 -19
- package/build/index.js.map +1 -1
- package/package.json +5 -6
package/build/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { Form } from 'react-bootstrap';
|
|
3
|
-
import
|
|
3
|
+
import 'qrcode';
|
|
4
4
|
import { ExclamationCircle, CheckCircle } from 'react-bootstrap-icons';
|
|
5
5
|
|
|
6
6
|
function styleInject(css, ref) {
|
|
@@ -71,23 +71,12 @@ var css_248z$4 = ".qr-loading-title{color:#e7e7e7;padding-top:15px}#qr-loader{di
|
|
|
71
71
|
styleInject(css_248z$4);
|
|
72
72
|
|
|
73
73
|
var QrCode = function (prop) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
81
|
-
catch (_a) {
|
|
82
|
-
console.error('The QR code failed to write to the canvas');
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
useEffect(function () {
|
|
86
|
-
if (!qrRendered) {
|
|
87
|
-
writeQRtoCanvas();
|
|
88
|
-
qrRendered = true;
|
|
89
|
-
}
|
|
90
|
-
}, [writeQRtoCanvas]);
|
|
74
|
+
// useEffect(() => {
|
|
75
|
+
// if(!qrRendered) {
|
|
76
|
+
// writeQRtoCanvas();
|
|
77
|
+
// qrRendered = true;
|
|
78
|
+
// }
|
|
79
|
+
// }, [writeQRtoCanvas]);
|
|
91
80
|
return (React.createElement("div", { id: "qr-box" },
|
|
92
81
|
React.createElement("canvas", { id: "qr-code" }),
|
|
93
82
|
prop.state === 'warning' ?
|
package/build/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/action-card/ActionCard.tsx","../src/button/Button.tsx","../src/alert/Alert.tsx","../src/form-input/FormInput.tsx","../src/qr-code/QrCode.tsx","../src/consent-card/ConsentCard.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { FunctionComponent } from \"react\";\nimport \"./ActionCard.scss\";\n\nexport interface ActionCardProps {\n title: string;\n caption: string;\n src: string;\n}\n\nexport const ActionCard: FunctionComponent<ActionCardProps> = (prop) => {\n return (\n <div className=\"flex flex-col justify-center rounded-3xl jurne-card bg-white p-1.5\">\n <div className=\"flex flex-col max-w-md px-8 py-6 space-y-5 items-center\">\n <img src={prop.src} width={36} alt={prop.caption} />\n <h3 className=\"font-bold text-gray-900 text-xl\">{prop.title}</h3>\n <span className=\"text-center text-gray-600\">{prop.caption}</span>\n </div>\n </div>\n );\n};","import React, { FunctionComponent } from \"react\";\nimport \"./Button.scss\";\n\nexport interface ButtonProps {\n title: string;\n style: string\n}\n\nexport const Button: FunctionComponent<ButtonProps> = (prop) => {\n return (\n <button type=\"button\" className=\"btn btn-primary\">{prop.title}</button>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport \"./Alert.scss\";\n\nexport interface AlertProps {\n title: string;\n}\n\nexport const Alert: FunctionComponent<AlertProps> = (prop) => {\n return (\n <div className=\"alert alert-light\" role=\"alert\">\n {prop.title}\n </div>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport \"./FormInput.scss\";\nimport { Form } from 'react-bootstrap';\n\nexport interface FormInputProps {\n title: string;\n}\n\nexport const FormInput: FunctionComponent<FormInputProps> = (prop) => {\n return (\n <div className=\"form-input\">\n <Form.Label>Username</Form.Label>\n <Form.Control className=\"text-input-field\" type=\"email\" placeholder=\"Enter email\" />\n </div>\n );\n};\n","import React, { FunctionComponent, useEffect } from \"react\";\nimport QRCode from 'qrcode';\nimport { CheckCircle, ExclamationCircle } from 'react-bootstrap-icons';\nimport \"./QrCode.scss\";\n\nexport interface Props {\n url: string;\n state: string;\n}\n\nexport const QrCode: FunctionComponent<Props> = (prop) => {\n let qrRendered = false;\n \n const writeQRtoCanvas = () => {\n try {\n QRCode.toCanvas(document.getElementById('qr-code'), prop.url || \"\", {\n width: 400\n });\n } catch {\n console.error('The QR code failed to write to the canvas');\n }\n }\n \n useEffect(() => {\n
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/action-card/ActionCard.tsx","../src/button/Button.tsx","../src/alert/Alert.tsx","../src/form-input/FormInput.tsx","../src/qr-code/QrCode.tsx","../src/consent-card/ConsentCard.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { FunctionComponent } from \"react\";\nimport \"./ActionCard.scss\";\n\nexport interface ActionCardProps {\n title: string;\n caption: string;\n src: string;\n}\n\nexport const ActionCard: FunctionComponent<ActionCardProps> = (prop) => {\n return (\n <div className=\"flex flex-col justify-center rounded-3xl jurne-card bg-white p-1.5\">\n <div className=\"flex flex-col max-w-md px-8 py-6 space-y-5 items-center\">\n <img src={prop.src} width={36} alt={prop.caption} />\n <h3 className=\"font-bold text-gray-900 text-xl\">{prop.title}</h3>\n <span className=\"text-center text-gray-600\">{prop.caption}</span>\n </div>\n </div>\n );\n};","import React, { FunctionComponent } from \"react\";\nimport \"./Button.scss\";\n\nexport interface ButtonProps {\n title: string;\n style: string\n}\n\nexport const Button: FunctionComponent<ButtonProps> = (prop) => {\n return (\n <button type=\"button\" className=\"btn btn-primary\">{prop.title}</button>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport \"./Alert.scss\";\n\nexport interface AlertProps {\n title: string;\n}\n\nexport const Alert: FunctionComponent<AlertProps> = (prop) => {\n return (\n <div className=\"alert alert-light\" role=\"alert\">\n {prop.title}\n </div>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport \"./FormInput.scss\";\nimport { Form } from 'react-bootstrap';\n\nexport interface FormInputProps {\n title: string;\n}\n\nexport const FormInput: FunctionComponent<FormInputProps> = (prop) => {\n return (\n <div className=\"form-input\">\n <Form.Label>Username</Form.Label>\n <Form.Control className=\"text-input-field\" type=\"email\" placeholder=\"Enter email\" />\n </div>\n );\n};\n","import React, { FunctionComponent, useEffect } from \"react\";\nimport QRCode from 'qrcode';\nimport { CheckCircle, ExclamationCircle } from 'react-bootstrap-icons';\nimport \"./QrCode.scss\";\n\nexport interface Props {\n url: string;\n state: string;\n}\n\nexport const QrCode: FunctionComponent<Props> = (prop) => {\n let qrRendered = false;\n \n const writeQRtoCanvas = () => {\n try {\n QRCode.toCanvas(document.getElementById('qr-code'), prop.url || \"\", {\n width: 400\n });\n } catch {\n console.error('The QR code failed to write to the canvas');\n }\n }\n \n // useEffect(() => {\n // if(!qrRendered) {\n // writeQRtoCanvas();\n // qrRendered = true;\n // }\n // }, [writeQRtoCanvas]);\n\n return (\n <div id=\"qr-box\">\n <canvas id=\"qr-code\"></canvas>\n {prop.state === 'warning' ?\n <ExclamationCircle className={`qr-icon dialog-icon ${prop.state}`}/> :\n <CheckCircle className={`qr-icon dialog-icon ${prop.state}`}/> \n }\n </div>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport { Button } from \"../button/Button\";\nimport _ from \"lodash\";\nimport \"./ConsentCard.scss\";\nimport \"../typography.scss\";\nimport \"../variables.scss\";\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nexport interface Props {\n title: string;\n agreement: string;\n pii: Array<string>;\n back: string;\n accept: string;\n}\n\nexport const ConsentCard: FunctionComponent<Props> = (prop) => {\n return (\n <div className=\"flex flex-col justify-center rounded-3xl jurne-card bg-white p-1.5\">\n <div className=\"flex flex-col max-w-md px-8 py-6 space-y-5\">\n <span className=\"consent-title items-center\">{prop.title}</span>\n <span className=\"consent-body items-center\">{prop.agreement}</span>\n <ul>\n {prop.pii.map(item => <li className=\"pii-list-item\">{item}</li>)}\n </ul>\n </div>\n <div className=\"row col-flex\">\n <div className=\"col-sm text-center\">\n <Button title={prop.back} style=\"secondary\"></Button>\n </div>\n <div className=\"col-sm text-center\">\n <Button title={prop.accept} style=\"primary\"></Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/build/index.js
CHANGED
|
@@ -4,13 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactBootstrap = require('react-bootstrap');
|
|
7
|
-
|
|
7
|
+
require('qrcode');
|
|
8
8
|
var reactBootstrapIcons = require('react-bootstrap-icons');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
|
-
var QRCode__default = /*#__PURE__*/_interopDefaultLegacy(QRCode);
|
|
14
13
|
|
|
15
14
|
function styleInject(css, ref) {
|
|
16
15
|
if ( ref === void 0 ) ref = {};
|
|
@@ -80,23 +79,12 @@ var css_248z$4 = ".qr-loading-title{color:#e7e7e7;padding-top:15px}#qr-loader{di
|
|
|
80
79
|
styleInject(css_248z$4);
|
|
81
80
|
|
|
82
81
|
var QrCode = function (prop) {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
catch (_a) {
|
|
91
|
-
console.error('The QR code failed to write to the canvas');
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
React.useEffect(function () {
|
|
95
|
-
if (!qrRendered) {
|
|
96
|
-
writeQRtoCanvas();
|
|
97
|
-
qrRendered = true;
|
|
98
|
-
}
|
|
99
|
-
}, [writeQRtoCanvas]);
|
|
82
|
+
// useEffect(() => {
|
|
83
|
+
// if(!qrRendered) {
|
|
84
|
+
// writeQRtoCanvas();
|
|
85
|
+
// qrRendered = true;
|
|
86
|
+
// }
|
|
87
|
+
// }, [writeQRtoCanvas]);
|
|
100
88
|
return (React__default['default'].createElement("div", { id: "qr-box" },
|
|
101
89
|
React__default['default'].createElement("canvas", { id: "qr-code" }),
|
|
102
90
|
prop.state === 'warning' ?
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/action-card/ActionCard.tsx","../src/button/Button.tsx","../src/alert/Alert.tsx","../src/form-input/FormInput.tsx","../src/qr-code/QrCode.tsx","../src/consent-card/ConsentCard.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { FunctionComponent } from \"react\";\nimport \"./ActionCard.scss\";\n\nexport interface ActionCardProps {\n title: string;\n caption: string;\n src: string;\n}\n\nexport const ActionCard: FunctionComponent<ActionCardProps> = (prop) => {\n return (\n <div className=\"flex flex-col justify-center rounded-3xl jurne-card bg-white p-1.5\">\n <div className=\"flex flex-col max-w-md px-8 py-6 space-y-5 items-center\">\n <img src={prop.src} width={36} alt={prop.caption} />\n <h3 className=\"font-bold text-gray-900 text-xl\">{prop.title}</h3>\n <span className=\"text-center text-gray-600\">{prop.caption}</span>\n </div>\n </div>\n );\n};","import React, { FunctionComponent } from \"react\";\nimport \"./Button.scss\";\n\nexport interface ButtonProps {\n title: string;\n style: string\n}\n\nexport const Button: FunctionComponent<ButtonProps> = (prop) => {\n return (\n <button type=\"button\" className=\"btn btn-primary\">{prop.title}</button>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport \"./Alert.scss\";\n\nexport interface AlertProps {\n title: string;\n}\n\nexport const Alert: FunctionComponent<AlertProps> = (prop) => {\n return (\n <div className=\"alert alert-light\" role=\"alert\">\n {prop.title}\n </div>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport \"./FormInput.scss\";\nimport { Form } from 'react-bootstrap';\n\nexport interface FormInputProps {\n title: string;\n}\n\nexport const FormInput: FunctionComponent<FormInputProps> = (prop) => {\n return (\n <div className=\"form-input\">\n <Form.Label>Username</Form.Label>\n <Form.Control className=\"text-input-field\" type=\"email\" placeholder=\"Enter email\" />\n </div>\n );\n};\n","import React, { FunctionComponent, useEffect } from \"react\";\nimport QRCode from 'qrcode';\nimport { CheckCircle, ExclamationCircle } from 'react-bootstrap-icons';\nimport \"./QrCode.scss\";\n\nexport interface Props {\n url: string;\n state: string;\n}\n\nexport const QrCode: FunctionComponent<Props> = (prop) => {\n let qrRendered = false;\n \n const writeQRtoCanvas = () => {\n try {\n QRCode.toCanvas(document.getElementById('qr-code'), prop.url || \"\", {\n width: 400\n });\n } catch {\n console.error('The QR code failed to write to the canvas');\n }\n }\n \n useEffect(() => {\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/action-card/ActionCard.tsx","../src/button/Button.tsx","../src/alert/Alert.tsx","../src/form-input/FormInput.tsx","../src/qr-code/QrCode.tsx","../src/consent-card/ConsentCard.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { FunctionComponent } from \"react\";\nimport \"./ActionCard.scss\";\n\nexport interface ActionCardProps {\n title: string;\n caption: string;\n src: string;\n}\n\nexport const ActionCard: FunctionComponent<ActionCardProps> = (prop) => {\n return (\n <div className=\"flex flex-col justify-center rounded-3xl jurne-card bg-white p-1.5\">\n <div className=\"flex flex-col max-w-md px-8 py-6 space-y-5 items-center\">\n <img src={prop.src} width={36} alt={prop.caption} />\n <h3 className=\"font-bold text-gray-900 text-xl\">{prop.title}</h3>\n <span className=\"text-center text-gray-600\">{prop.caption}</span>\n </div>\n </div>\n );\n};","import React, { FunctionComponent } from \"react\";\nimport \"./Button.scss\";\n\nexport interface ButtonProps {\n title: string;\n style: string\n}\n\nexport const Button: FunctionComponent<ButtonProps> = (prop) => {\n return (\n <button type=\"button\" className=\"btn btn-primary\">{prop.title}</button>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport \"./Alert.scss\";\n\nexport interface AlertProps {\n title: string;\n}\n\nexport const Alert: FunctionComponent<AlertProps> = (prop) => {\n return (\n <div className=\"alert alert-light\" role=\"alert\">\n {prop.title}\n </div>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport \"./FormInput.scss\";\nimport { Form } from 'react-bootstrap';\n\nexport interface FormInputProps {\n title: string;\n}\n\nexport const FormInput: FunctionComponent<FormInputProps> = (prop) => {\n return (\n <div className=\"form-input\">\n <Form.Label>Username</Form.Label>\n <Form.Control className=\"text-input-field\" type=\"email\" placeholder=\"Enter email\" />\n </div>\n );\n};\n","import React, { FunctionComponent, useEffect } from \"react\";\nimport QRCode from 'qrcode';\nimport { CheckCircle, ExclamationCircle } from 'react-bootstrap-icons';\nimport \"./QrCode.scss\";\n\nexport interface Props {\n url: string;\n state: string;\n}\n\nexport const QrCode: FunctionComponent<Props> = (prop) => {\n let qrRendered = false;\n \n const writeQRtoCanvas = () => {\n try {\n QRCode.toCanvas(document.getElementById('qr-code'), prop.url || \"\", {\n width: 400\n });\n } catch {\n console.error('The QR code failed to write to the canvas');\n }\n }\n \n // useEffect(() => {\n // if(!qrRendered) {\n // writeQRtoCanvas();\n // qrRendered = true;\n // }\n // }, [writeQRtoCanvas]);\n\n return (\n <div id=\"qr-box\">\n <canvas id=\"qr-code\"></canvas>\n {prop.state === 'warning' ?\n <ExclamationCircle className={`qr-icon dialog-icon ${prop.state}`}/> :\n <CheckCircle className={`qr-icon dialog-icon ${prop.state}`}/> \n }\n </div>\n );\n};\n","import React, { FunctionComponent } from \"react\";\nimport { Button } from \"../button/Button\";\nimport _ from \"lodash\";\nimport \"./ConsentCard.scss\";\nimport \"../typography.scss\";\nimport \"../variables.scss\";\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nexport interface Props {\n title: string;\n agreement: string;\n pii: Array<string>;\n back: string;\n accept: string;\n}\n\nexport const ConsentCard: FunctionComponent<Props> = (prop) => {\n return (\n <div className=\"flex flex-col justify-center rounded-3xl jurne-card bg-white p-1.5\">\n <div className=\"flex flex-col max-w-md px-8 py-6 space-y-5\">\n <span className=\"consent-title items-center\">{prop.title}</span>\n <span className=\"consent-body items-center\">{prop.agreement}</span>\n <ul>\n {prop.pii.map(item => <li className=\"pii-list-item\">{item}</li>)}\n </ul>\n </div>\n <div className=\"row col-flex\">\n <div className=\"col-sm text-center\">\n <Button title={prop.back} style=\"secondary\"></Button>\n </div>\n <div className=\"col-sm text-center\">\n <Button title={prop.accept} style=\"primary\"></Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["React","Form","ExclamationCircle","CheckCircle"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kiva-protocol-ui-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.41",
|
|
4
4
|
"description": "Protocol Web UI",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"module": "build/index.esm.js",
|
|
@@ -39,10 +39,7 @@
|
|
|
39
39
|
"homepage": "https://github.com/kiva/protocol-ui-kit#readme",
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": ">=16.8.0",
|
|
42
|
-
"react-dom": ">=16.8.0"
|
|
43
|
-
"qrcode": "^1.4.4",
|
|
44
|
-
"react-bootstrap": "^2.0.2",
|
|
45
|
-
"react-bootstrap-icons": "^1.6.1"
|
|
42
|
+
"react-dom": ">=16.8.0"
|
|
46
43
|
},
|
|
47
44
|
"devDependencies": {
|
|
48
45
|
"@babel/core": "^7.15.0",
|
|
@@ -85,7 +82,9 @@
|
|
|
85
82
|
"path": "^0.12.7",
|
|
86
83
|
"popper.js": "^1.16.1",
|
|
87
84
|
"postcss": "^8.3.11",
|
|
88
|
-
|
|
85
|
+
"qrcode": "^1.4.4",
|
|
86
|
+
"react-bootstrap": "^2.0.2",
|
|
87
|
+
"react-bootstrap-icons": "^1.6.1",
|
|
89
88
|
"rollup-plugin-img": "^1.1.0",
|
|
90
89
|
"rollup-plugin-scss": "^3.0.0",
|
|
91
90
|
"rollup-plugin-tailwindcss": "^1.0.0",
|