everest-toolkit - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/index.es.js

@@ -183,3 +183,3 @@ import React, { Fragment } from 'react';
   size: PropTypes.string,
-  className: PropTypes.object
+  className: PropTypes.string
 };
@@ -646,3 +646,274 @@
 
-export { Button, ButtonActions, Heading, Icon, Input, NameInput, PhoneInput, Text, InfoModal, Modal };
+var css$6 = ".SelectableList-module_container__3I2PV {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding: 8px;\n}\n\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked,\n[type=\"radio\"]:not(:checked) {\n    position: absolute;\n    left: -9999px;\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked + label,\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:not(:checked) + label\n{\n    position: relative;\n    padding-left: 28px;\n    cursor: pointer;\n    line-height: 20px;\n    display: inline-block;\n    color: #666;\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked + label:before,\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:not(:checked) + label:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 18px;\n    height: 18px;\n    border: 1px solid #ddd;\n    border-radius: 100%;\n    background: #fff;\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked + label:after,\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:not(:checked) + label:after {\n    content: '';\n    width: 12px;\n    height: 12px;\n    background: #4B92DC;\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    border-radius: 100%;\n    -webkit-transition: all 0.2s ease;\n    transition: all 0.2s ease;\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:not(:checked) + label:after {\n    opacity: 0;\n    -webkit-transform: scale(0);\n    transform: scale(0);\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked + label:after {\n    opacity: 1;\n    -webkit-transform: scale(1);\n    transform: scale(1);\n}";
+var styles$5 = { "container": "SelectableList-module_container__3I2PV", "radio": "SelectableList-module_radio__3UZNx" };
+styleInject(css$6);
+
+var ListItem = function ListItem(_ref) {
+  var text = _ref.text;
+  return React.createElement(
+    'li',
+    null,
+    React.createElement(
+      'div',
+      { className: styles$5.container },
+      React.createElement('input', {
+        type: 'radio',
+        checked: 'checked',
+        name: 'radio',
+        className: styles$5.radio
+      }),
+      React.createElement(
+        'label',
+        { htmlFor: 'radio' },
+        React.createElement(
+          Text,
+          null,
+          text
+        )
+      )
+    )
+  );
+};
+
+ListItem.propTypes = {
+  text: PropTypes.string
+};
+
+var SelectableList = function SelectableList(_ref2) {
+  var options = _ref2.options,
+      multipleSelects = _ref2.multipleSelects;
+  return React.createElement(
+    'div',
+    null,
+    React.createElement(
+      'ul',
+      null,
+      options && options.map(function (option) {
+        return React.createElement(ListItem, { key: option, text: option });
+      })
+    )
+  );
+};
+
+SelectableList.defaultProps = {
+  multipleSelects: false
+};
+
+SelectableList.propTypes = {
+  multipleSelects: PropTypes.bool,
+  options: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+var css$7 = ".Status-module_container__2C18r {\n\t/* Rectangle */\n\tborder-radius: 16px;\n\tborder: solid 1px #ded0bd;\n\tpadding: 1px 8px;\n\twidth: fit-content;\n\t/* Text */\n\tfont-size: 10px;\n\tfont-weight: 600;\n\tfont-style: normal;\n\tfont-stretch: normal;\n\tline-height: 1.6;\n\tletter-spacing: 0.3px;\n\ttext-align: center;\n\tcolor: #e66c0c;\n\ttext-transform: uppercase;\n\t\n}";
+var Styles$1 = { "container": "Status-module_container__2C18r" };
+styleInject(css$7);
+
+var colors = {
+  orange: '#e66c0c',
+  red: '#d62b2b',
+  green: '#05b74a',
+  grey: '#62757a'
+};
+var Status = function Status(_ref) {
+  var title = _ref.title,
+      color = _ref.color;
+  return React.createElement(
+    'div',
+    {
+      className: Styles$1.container,
+      style: { color: colors[color.toLowerCase()] }
+    },
+    title
+  );
+};
+
+Status.defaultProps = {
+  color: 'orange'
+};
+
+Status.propTypes = {
+  color: PropTypes.oneOf(Object.keys(colors)),
+  title: PropTypes.string.isRequired
+};
+
+var css$8 = ".Steps-module_container__1JSI4 {\n\theight: 36px;\n\t/* width: 100%; */\n\tpadding:10px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #fafafa;\n\t\n\tborder-bottom: solid 1px #d3d3db;\n}\n.Steps-module_content__7u3U- {\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.Steps-module_progressBar__Rsn8p {\n\twidth: 50%;\n\tpadding: 10px;\n}\n\n.Steps-module_labels__2ib5P {\n\twidth: 70%;\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n\n\n@media  screen and ( min-width: 768px) {\n\t.Steps-module_progressBar__Rsn8p {\n\t\tdisplay: none;\n\t}\n\t.Steps-module_content__7u3U- {\n\t\t/* justify-content: flex-start; */\n\t\tdisplay: flex;\n\t\tjustify-content: flex-start;\n\t\twidth: 720px;\n\t}\n\t.Steps-module_labels__2ib5P {\n\t\twidth: 100%;\n\t\tjustify-content: flex-start;\n\t}\n\t.Steps-module_label__qSiWa {\n\t\tmargin-right: 54px;\n\t}\n}";
+var styles$6 = { "container": "Steps-module_container__1JSI4", "content": "Steps-module_content__7u3U-", "progressBar": "Steps-module_progressBar__Rsn8p", "labels": "Steps-module_labels__2ib5P", "label": "Steps-module_label__qSiWa" };
+styleInject(css$8);
+
+var css$9 = ".ProgressBar-module_background__2Otkl {\n\tborder-radius: 3px;\n\tbackground-color: #ebebf0;\n}\n\n.ProgressBar-module_progressBar__1lIGi {\n\theight: 4px;\n\tborder-radius: 3px;\n\t/* background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); */\n\ttransition: 0.4s linear;\n\ttransition-property: width;\n}\n\n.ProgressBar-module_step1__B-Sq3 .ProgressBar-module_progressBar__1lIGi {\n\twidth: 0%;\n\tbackground-color: #9da2a3;\n\t/* animation: progressAnimation 6s; */\n}\n\n.ProgressBar-module_step2__A00RA .ProgressBar-module_progressBar__1lIGi {\n\twidth: 50%;\n\tbackground-color: #9da2a3;\n}\n\n.ProgressBar-module_step3__18K8z .ProgressBar-module_progressBar__1lIGi {\n\twidth: 100%;\n\tbackground-color: #9da2a3;\n}\n\n@keyframes ProgressBar-module_progressAnimation__3wlPR {\n\t0% {\n\t\twidth: 5%;\n\t}\n\t100% {\n\t\twidth: 85%;\n\t}\n}";
+var styles$7 = { "background": "ProgressBar-module_background__2Otkl", "progressBar": "ProgressBar-module_progressBar__1lIGi", "step1": "ProgressBar-module_step1__B-Sq3", "step2": "ProgressBar-module_step2__A00RA", "step3": "ProgressBar-module_step3__18K8z", "progressAnimation": "ProgressBar-module_progressAnimation__3wlPR" };
+styleInject(css$9);
+
+var getStyle = function getStyle(step) {
+  switch (step) {
+    case 1:
+      return styles$7.step1;
+    case 2:
+      return styles$7.step2;
+    case 3:
+      return styles$7.step3;
+    default:
+      return null;
+  }
+};
+
+var ProgressBar = function ProgressBar(_ref) {
+  var currentStep = _ref.currentStep;
+  return React.createElement(
+    'div',
+    { className: styles$7.container },
+    React.createElement(
+      'div',
+      { className: [styles$7.background, getStyle(currentStep)].join(' ') },
+      React.createElement('div', { className: styles$7.progressBar })
+    )
+  );
+};
+
+ProgressBar.defaultProps = {};
+
+ProgressBar.propTypes = {
+  currentStep: PropTypes.number.isRequired
+};
+
+var Steps = function Steps(_ref) {
+  var step = _ref.step,
+      labels = _ref.labels;
+
+  /* TODO: Use theme to check what to render here */
+  var width = window & window.innerWidth ? window.innerWidth : 600;
+  return React.createElement(
+    'div',
+    { className: styles$6.container },
+    React.createElement(
+      'div',
+      { className: styles$6.content },
+      React.createElement(
+        'div',
+        { className: styles$6.progressBar },
+        React.createElement(ProgressBar, { currentStep: step })
+      ),
+      React.createElement(
+        'div',
+        { className: styles$6.labels },
+        labels.map(function (label, index) {
+          return React.createElement(
+            Text,
+            {
+              key: label,
+              className: styles$6.label,
+              size: width < 768 ? '10px' : '14px',
+              bold: index < step
+            },
+            width < 768 ? label : index + 1 + '. ' + label
+          );
+        })
+      )
+    )
+  );
+};
+
+Steps.defaultProps = {
+  multipleSelects: false
+};
+
+Steps.propTypes = {
+  step: PropTypes.number,
+  labels: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+var _ref$6 =
+/*#__PURE__*/
+React.createElement("path", {
+  fill: "#05B74A",
+  d: "M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8-1.41-1.42zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+});
+
+var checkGreen = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cpath%20fill%3D%22%2305B74A%22%20fill-rule%3D%22nonzero%22%20d%3D%22M16.59%207.58L10%2014.17l-3.59-3.58L5%2012l5%205%208-8-1.41-1.42zM12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208z%22%2F%3E%3C%2Fsvg%3E";
+
+var _ref$7 =
+/*#__PURE__*/
+React.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, React.createElement("path", {
+  fill: "#FFF",
+  d: "M0 0h24v24H0z"
+}), React.createElement("path", {
+  fill: "#2077D5",
+  fillRule: "nonzero",
+  d: "M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+}));
+
+var infoBlue = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%232077D5%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11%207h2v2h-2V7zm0%204h2v6h-2v-6zm1-9C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var _ref$8 =
+/*#__PURE__*/
+React.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, React.createElement("path", {
+  fill: "#FFF",
+  d: "M0 0h24v24H0z"
+}), React.createElement("path", {
+  fill: "#D62B2B",
+  fillRule: "nonzero",
+  d: "M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+}));
+
+var infoRed = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23D62B2B%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11%207h2v2h-2V7zm0%204h2v6h-2v-6zm1-9C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var css$a = ".Toast-module_container__2XF1k {\n\tdisplay: flex;\n\tpadding: 8px 16px;\n\tposition: sticky;\n\tposition: -webkit-sticky;\n\tborder-top: solid 1px #d3d3db;\n\tbottom: 0;\n}\n\n.Toast-module_icon__c1u-e {\n\theight: 24px;\n\twidth: 24px;\n\tmargin-right: 10px;\n}";
+var styles$8 = { "container": "Toast-module_container__2XF1k", "icon": "Toast-module_icon__c1u-e" };
+styleInject(css$a);
+
+var getType = {
+  correct: {
+    color: '#05b74a',
+    icon: checkGreen
+  },
+  info: {
+    color: '#2077d5',
+    icon: infoBlue
+  },
+  warning: {
+    color: '#d62b2b',
+    icon: infoRed
+  }
+};
+
+var Toast = function Toast(_ref) {
+  var label = _ref.label,
+      type = _ref.type;
+
+  var buttonType = getType[type] || getType.info;
+  return React.createElement(
+    'div',
+    {
+      className: styles$8.container,
+      style: { borderLeft: 'solid 4px ' + buttonType.color }
+    },
+    React.createElement(
+      'div',
+      { className: styles$8.icon },
+      React.createElement('img', { src: buttonType.icon })
+    ),
+    React.createElement(
+      'div',
+      null,
+      label
+    )
+  );
+};
+
+Toast.defaultProps = {
+  type: 'info'
+};
+
+Toast.propTypes = {
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string
+};
+
+export { Button, ButtonActions, Heading, Icon, Input, NameInput, PhoneInput, Text, InfoModal, Modal, SelectableList, Status, Steps, Toast };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -190,3 +190,3 @@ 'use strict';
   size: PropTypes.string,
-  className: PropTypes.object
+  className: PropTypes.string
 };
@@ -653,2 +653,273 @@
 
+var css$6 = ".SelectableList-module_container__3I2PV {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding: 8px;\n}\n\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked,\n[type=\"radio\"]:not(:checked) {\n    position: absolute;\n    left: -9999px;\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked + label,\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:not(:checked) + label\n{\n    position: relative;\n    padding-left: 28px;\n    cursor: pointer;\n    line-height: 20px;\n    display: inline-block;\n    color: #666;\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked + label:before,\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:not(:checked) + label:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 18px;\n    height: 18px;\n    border: 1px solid #ddd;\n    border-radius: 100%;\n    background: #fff;\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked + label:after,\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:not(:checked) + label:after {\n    content: '';\n    width: 12px;\n    height: 12px;\n    background: #4B92DC;\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    border-radius: 100%;\n    -webkit-transition: all 0.2s ease;\n    transition: all 0.2s ease;\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:not(:checked) + label:after {\n    opacity: 0;\n    -webkit-transform: scale(0);\n    transform: scale(0);\n}\n.SelectableList-module_radio__3UZNx[type=\"radio\"]:checked + label:after {\n    opacity: 1;\n    -webkit-transform: scale(1);\n    transform: scale(1);\n}";
+var styles$5 = { "container": "SelectableList-module_container__3I2PV", "radio": "SelectableList-module_radio__3UZNx" };
+styleInject(css$6);
+
+var ListItem = function ListItem(_ref) {
+  var text = _ref.text;
+  return React__default.createElement(
+    'li',
+    null,
+    React__default.createElement(
+      'div',
+      { className: styles$5.container },
+      React__default.createElement('input', {
+        type: 'radio',
+        checked: 'checked',
+        name: 'radio',
+        className: styles$5.radio
+      }),
+      React__default.createElement(
+        'label',
+        { htmlFor: 'radio' },
+        React__default.createElement(
+          Text,
+          null,
+          text
+        )
+      )
+    )
+  );
+};
+
+ListItem.propTypes = {
+  text: PropTypes.string
+};
+
+var SelectableList = function SelectableList(_ref2) {
+  var options = _ref2.options,
+      multipleSelects = _ref2.multipleSelects;
+  return React__default.createElement(
+    'div',
+    null,
+    React__default.createElement(
+      'ul',
+      null,
+      options && options.map(function (option) {
+        return React__default.createElement(ListItem, { key: option, text: option });
+      })
+    )
+  );
+};
+
+SelectableList.defaultProps = {
+  multipleSelects: false
+};
+
+SelectableList.propTypes = {
+  multipleSelects: PropTypes.bool,
+  options: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+var css$7 = ".Status-module_container__2C18r {\n\t/* Rectangle */\n\tborder-radius: 16px;\n\tborder: solid 1px #ded0bd;\n\tpadding: 1px 8px;\n\twidth: fit-content;\n\t/* Text */\n\tfont-size: 10px;\n\tfont-weight: 600;\n\tfont-style: normal;\n\tfont-stretch: normal;\n\tline-height: 1.6;\n\tletter-spacing: 0.3px;\n\ttext-align: center;\n\tcolor: #e66c0c;\n\ttext-transform: uppercase;\n\t\n}";
+var Styles$1 = { "container": "Status-module_container__2C18r" };
+styleInject(css$7);
+
+var colors = {
+  orange: '#e66c0c',
+  red: '#d62b2b',
+  green: '#05b74a',
+  grey: '#62757a'
+};
+var Status = function Status(_ref) {
+  var title = _ref.title,
+      color = _ref.color;
+  return React__default.createElement(
+    'div',
+    {
+      className: Styles$1.container,
+      style: { color: colors[color.toLowerCase()] }
+    },
+    title
+  );
+};
+
+Status.defaultProps = {
+  color: 'orange'
+};
+
+Status.propTypes = {
+  color: PropTypes.oneOf(Object.keys(colors)),
+  title: PropTypes.string.isRequired
+};
+
+var css$8 = ".Steps-module_container__1JSI4 {\n\theight: 36px;\n\t/* width: 100%; */\n\tpadding:10px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #fafafa;\n\t\n\tborder-bottom: solid 1px #d3d3db;\n}\n.Steps-module_content__7u3U- {\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.Steps-module_progressBar__Rsn8p {\n\twidth: 50%;\n\tpadding: 10px;\n}\n\n.Steps-module_labels__2ib5P {\n\twidth: 70%;\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n\n\n@media  screen and ( min-width: 768px) {\n\t.Steps-module_progressBar__Rsn8p {\n\t\tdisplay: none;\n\t}\n\t.Steps-module_content__7u3U- {\n\t\t/* justify-content: flex-start; */\n\t\tdisplay: flex;\n\t\tjustify-content: flex-start;\n\t\twidth: 720px;\n\t}\n\t.Steps-module_labels__2ib5P {\n\t\twidth: 100%;\n\t\tjustify-content: flex-start;\n\t}\n\t.Steps-module_label__qSiWa {\n\t\tmargin-right: 54px;\n\t}\n}";
+var styles$6 = { "container": "Steps-module_container__1JSI4", "content": "Steps-module_content__7u3U-", "progressBar": "Steps-module_progressBar__Rsn8p", "labels": "Steps-module_labels__2ib5P", "label": "Steps-module_label__qSiWa" };
+styleInject(css$8);
+
+var css$9 = ".ProgressBar-module_background__2Otkl {\n\tborder-radius: 3px;\n\tbackground-color: #ebebf0;\n}\n\n.ProgressBar-module_progressBar__1lIGi {\n\theight: 4px;\n\tborder-radius: 3px;\n\t/* background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); */\n\ttransition: 0.4s linear;\n\ttransition-property: width;\n}\n\n.ProgressBar-module_step1__B-Sq3 .ProgressBar-module_progressBar__1lIGi {\n\twidth: 0%;\n\tbackground-color: #9da2a3;\n\t/* animation: progressAnimation 6s; */\n}\n\n.ProgressBar-module_step2__A00RA .ProgressBar-module_progressBar__1lIGi {\n\twidth: 50%;\n\tbackground-color: #9da2a3;\n}\n\n.ProgressBar-module_step3__18K8z .ProgressBar-module_progressBar__1lIGi {\n\twidth: 100%;\n\tbackground-color: #9da2a3;\n}\n\n@keyframes ProgressBar-module_progressAnimation__3wlPR {\n\t0% {\n\t\twidth: 5%;\n\t}\n\t100% {\n\t\twidth: 85%;\n\t}\n}";
+var styles$7 = { "background": "ProgressBar-module_background__2Otkl", "progressBar": "ProgressBar-module_progressBar__1lIGi", "step1": "ProgressBar-module_step1__B-Sq3", "step2": "ProgressBar-module_step2__A00RA", "step3": "ProgressBar-module_step3__18K8z", "progressAnimation": "ProgressBar-module_progressAnimation__3wlPR" };
+styleInject(css$9);
+
+var getStyle = function getStyle(step) {
+  switch (step) {
+    case 1:
+      return styles$7.step1;
+    case 2:
+      return styles$7.step2;
+    case 3:
+      return styles$7.step3;
+    default:
+      return null;
+  }
+};
+
+var ProgressBar = function ProgressBar(_ref) {
+  var currentStep = _ref.currentStep;
+  return React__default.createElement(
+    'div',
+    { className: styles$7.container },
+    React__default.createElement(
+      'div',
+      { className: [styles$7.background, getStyle(currentStep)].join(' ') },
+      React__default.createElement('div', { className: styles$7.progressBar })
+    )
+  );
+};
+
+ProgressBar.defaultProps = {};
+
+ProgressBar.propTypes = {
+  currentStep: PropTypes.number.isRequired
+};
+
+var Steps = function Steps(_ref) {
+  var step = _ref.step,
+      labels = _ref.labels;
+
+  /* TODO: Use theme to check what to render here */
+  var width = window & window.innerWidth ? window.innerWidth : 600;
+  return React__default.createElement(
+    'div',
+    { className: styles$6.container },
+    React__default.createElement(
+      'div',
+      { className: styles$6.content },
+      React__default.createElement(
+        'div',
+        { className: styles$6.progressBar },
+        React__default.createElement(ProgressBar, { currentStep: step })
+      ),
+      React__default.createElement(
+        'div',
+        { className: styles$6.labels },
+        labels.map(function (label, index) {
+          return React__default.createElement(
+            Text,
+            {
+              key: label,
+              className: styles$6.label,
+              size: width < 768 ? '10px' : '14px',
+              bold: index < step
+            },
+            width < 768 ? label : index + 1 + '. ' + label
+          );
+        })
+      )
+    )
+  );
+};
+
+Steps.defaultProps = {
+  multipleSelects: false
+};
+
+Steps.propTypes = {
+  step: PropTypes.number,
+  labels: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+var _ref$6 =
+/*#__PURE__*/
+React__default.createElement("path", {
+  fill: "#05B74A",
+  d: "M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8-1.41-1.42zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+});
+
+var checkGreen = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cpath%20fill%3D%22%2305B74A%22%20fill-rule%3D%22nonzero%22%20d%3D%22M16.59%207.58L10%2014.17l-3.59-3.58L5%2012l5%205%208-8-1.41-1.42zM12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208z%22%2F%3E%3C%2Fsvg%3E";
+
+var _ref$7 =
+/*#__PURE__*/
+React__default.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, React__default.createElement("path", {
+  fill: "#FFF",
+  d: "M0 0h24v24H0z"
+}), React__default.createElement("path", {
+  fill: "#2077D5",
+  fillRule: "nonzero",
+  d: "M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+}));
+
+var infoBlue = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%232077D5%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11%207h2v2h-2V7zm0%204h2v6h-2v-6zm1-9C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var _ref$8 =
+/*#__PURE__*/
+React__default.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, React__default.createElement("path", {
+  fill: "#FFF",
+  d: "M0 0h24v24H0z"
+}), React__default.createElement("path", {
+  fill: "#D62B2B",
+  fillRule: "nonzero",
+  d: "M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+}));
+
+var infoRed = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23D62B2B%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11%207h2v2h-2V7zm0%204h2v6h-2v-6zm1-9C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var css$a = ".Toast-module_container__2XF1k {\n\tdisplay: flex;\n\tpadding: 8px 16px;\n\tposition: sticky;\n\tposition: -webkit-sticky;\n\tborder-top: solid 1px #d3d3db;\n\tbottom: 0;\n}\n\n.Toast-module_icon__c1u-e {\n\theight: 24px;\n\twidth: 24px;\n\tmargin-right: 10px;\n}";
+var styles$8 = { "container": "Toast-module_container__2XF1k", "icon": "Toast-module_icon__c1u-e" };
+styleInject(css$a);
+
+var getType = {
+  correct: {
+    color: '#05b74a',
+    icon: checkGreen
+  },
+  info: {
+    color: '#2077d5',
+    icon: infoBlue
+  },
+  warning: {
+    color: '#d62b2b',
+    icon: infoRed
+  }
+};
+
+var Toast = function Toast(_ref) {
+  var label = _ref.label,
+      type = _ref.type;
+
+  var buttonType = getType[type] || getType.info;
+  return React__default.createElement(
+    'div',
+    {
+      className: styles$8.container,
+      style: { borderLeft: 'solid 4px ' + buttonType.color }
+    },
+    React__default.createElement(
+      'div',
+      { className: styles$8.icon },
+      React__default.createElement('img', { src: buttonType.icon })
+    ),
+    React__default.createElement(
+      'div',
+      null,
+      label
+    )
+  );
+};
+
+Toast.defaultProps = {
+  type: 'info'
+};
+
+Toast.propTypes = {
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string
+};
+
 exports.Button = Button;
@@ -664,2 +935,6 @@ exports.ButtonActions = ButtonActions;
 exports.Modal = Modal;
+exports.SelectableList = SelectableList;
+exports.Status = Status;
+exports.Steps = Steps;
+exports.Toast = Toast;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "everest-toolkit",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Explore Share UI React Components Toolkit",
@@ -17,3 +17,3 @@ "author": "MiltonTulli",
     "test": "cross-env CI=1 react-scripts test --env=jsdom --silent",
-    "test:update": "yarn test -- -u",
+    "test:update": "cross-env CI=1 react-scripts test --env=jsdom -u",
     "test:watch": "react-scripts test --env=jsdom",
@@ -20,0 +20,0 @@ "build": "rollup -c",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

134043

increased by43.32%

Lines of code

1765

increased by41.77%

Worsened metrics

Number of low supply chain risk alerts

9

increased by28.57%

No dependency changes