@luscii-healthtech/web-ui 0.1.18 → 0.1.21

package/dist/web-ui.esm.css

@@ -546,28 +546,6 @@
   .cweb-list-item.cweb-list-item-clickable:hover {
     background-color: #f2fafd; }
 
-.cweb-menu > .cweb-menu-content {
-  min-width: 300px;
-  border-radius: 4px;
-  background-color: #ffffff; }
-
-.cweb-menu > .cweb-menu-button {
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 44px;
-  height: 44px;
-  background: url("../../assets/big-menu-icon.svg") no-repeat center;
-  transition: 0.2s ease;
-  background-size: contain; }
-
-.cweb-menu > .cweb-menu-button:hover {
-  width: 44px;
-  height: 44px;
-  background: url("../../assets/big-menu-icon-hover.svg") no-repeat center;
-  transition: 0.2s ease; }
-
 .cweb-loading {
   display: flex;
   justify-content: center;
@@ -606,6 +584,28 @@
         border-top-left-radius: 4px;
         border-top-right-radius: 4px; }
 
+.cweb-menu > .cweb-menu-content {
+  min-width: 300px;
+  border-radius: 4px;
+  background-color: #ffffff; }
+
+.cweb-menu > .cweb-menu-button {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 44px;
+  height: 44px;
+  background: url("../../assets/big-menu-icon.svg") no-repeat center;
+  transition: 0.2s ease;
+  background-size: contain; }
+
+.cweb-menu > .cweb-menu-button:hover {
+  width: 44px;
+  height: 44px;
+  background: url("../../assets/big-menu-icon-hover.svg") no-repeat center;
+  transition: 0.2s ease; }
+
 .cweb-multiselect {
   display: flex; }
   .cweb-multiselect .cweb-multiselect-checkbox {

package/dist/web-ui.esm.js

@@ -1,8 +1,8 @@
 import React__default, { useState, useEffect, createElement, Component, PureComponent, Fragment, useCallback, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { navigate, Link } from '@reach/router';
 import Glider from 'react-glider';
+import { navigate, Link } from '@reach/router';
 import ReactModal from 'react-modal';
 import ReactDatePicker from 'react-datepicker';
 import moment from 'moment';
@@ -230,6 +230,163 @@ var Badge = function Badge(props) {
   }, props.badgeCount));
 };
 
+var BUTTON_ROLES = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SECONDARY_DARK: "secondaryDark",
+  TERTIARY: "tertiary",
+  QUATERNARY: "quaternary",
+  NEGATIVE: "negative",
+  TEXT: "text",
+  LINK: "link",
+  ICON: "icon"
+};
+
+var CloseIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.05037 5.63664C6.65984 5.24612 6.02668 5.24612 5.63615 5.63664C5.24563 6.02717 5.24563 6.66033 5.63616 7.05086L10.5862 12.0009L5.63618 16.9509C5.24566 17.3415 5.24566 17.9746 5.63618 18.3652C6.02671 18.7557 6.65987 18.7557 7.0504 18.3652L12.0004 13.4151L16.9499 18.3646C17.3404 18.7551 17.9736 18.7551 18.3641 18.3646C18.7546 17.974 18.7546 17.3409 18.3641 16.9504L13.4146 12.0009L18.3641 7.05145C18.7546 6.66093 18.7546 6.02776 18.3641 5.63724C17.9736 5.24671 17.3404 5.24671 16.9499 5.63724L12.0004 10.5867L7.05037 5.63664Z\" fill=\"#EDF2F7\"/>\n</svg>";
+
+var HamburgerIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6Z\" fill=\"#EDF2F7\"/>\n<path d=\"M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12Z\" fill=\"#EDF2F7\"/>\n<path d=\"M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H4Z\" fill=\"#EDF2F7\"/>\n</svg>";
+
+var ChevronRightBlueIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z\" fill=\"#0074DD\"/>\n</svg>";
+
+var ChevronRightGreyIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z\" fill=\"#EDF2F7\"/>\n</svg>";
+
+var ChevronLeftBlueIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z\" fill=\"#0074DD\"/>\n</svg>";
+
+var ChevronLeftGreyIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z\" fill=\"#EDF2F7\"/>\n</svg>";
+
+var SearchIcon = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.5006 11.0006H11.7106L11.4306 10.7306C12.6306 9.33063 13.2506 7.42063 12.9106 5.39063C12.4406 2.61063 10.1206 0.390626 7.32063 0.0506256C3.09063 -0.469374 -0.469374 3.09063 0.0506256 7.32063C0.390626 10.1206 2.61063 12.4406 5.39063 12.9106C7.42063 13.2506 9.33063 12.6306 10.7306 11.4306L11.0006 11.7106V12.5006L15.2506 16.7506C15.6606 17.1606 16.3306 17.1606 16.7406 16.7506C17.1506 16.3406 17.1506 15.6706 16.7406 15.2606L12.5006 11.0006ZM6.50063 11.0006C4.01063 11.0006 2.00063 8.99063 2.00063 6.50063C2.00063 4.01063 4.01063 2.00063 6.50063 2.00063C8.99063 2.00063 11.0006 4.01063 11.0006 6.50063C11.0006 8.99063 8.99063 11.0006 6.50063 11.0006Z\" fill=\"#0074DD\"/>\n</svg>";
+
+var SearchCancelIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.05086 0.636643C1.66033 0.246119 1.02717 0.246119 0.636643 0.636643C0.246119 1.02717 0.246119 1.66033 0.636643 2.05086L5.5867 7.00092L0.636672 11.9509C0.246148 12.3415 0.246148 12.9746 0.636672 13.3652C1.0272 13.7557 1.66036 13.7557 2.05089 13.3652L7.00091 8.41513L11.9503 13.3646C12.3409 13.7551 12.974 13.7551 13.3646 13.3646C13.7551 12.974 13.7551 12.3409 13.3646 11.9504L8.41513 7.00092L13.3646 2.05145C13.7551 1.66093 13.7551 1.02776 13.3646 0.637237C12.9741 0.246712 12.3409 0.246713 11.9504 0.637237L7.00092 5.5867L2.05086 0.636643Z\" fill=\"#0074DD\"/>\n</svg>";
+
+var StarIcon = "<svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.58663 1.04906C8.93899 0.258571 10.061 0.258571 10.4134 1.04906L12.1659 4.9807C12.3112 5.30673 12.6193 5.53057 12.9743 5.56804L17.2551 6.01985C18.1158 6.11069 18.4625 7.17779 17.8196 7.75718L14.6219 10.6389C14.3568 10.8778 14.2391 11.24 14.3131 11.5892L15.2063 15.8001C15.3858 16.6467 14.4781 17.3062 13.7284 16.8738L9.99962 14.7232C9.69041 14.5448 9.30959 14.5448 9.00038 14.7232L5.27159 16.8738C4.52189 17.3062 3.61416 16.6467 3.79373 15.8001L4.68686 11.5892C4.76093 11.24 4.64325 10.8778 4.37808 10.6389L1.18043 7.75718C0.537518 7.17779 0.88424 6.11069 1.74492 6.01985L6.0257 5.56804C6.38068 5.53057 6.68877 5.30673 6.8341 4.9807L8.58663 1.04906Z\" fill=\"#009FE3\"/>\n</svg>";
+
+var checkmark = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n    <g transform=\"translate(1.5, 0.5)\">\n        <path fill=\"none\" fill-rule=\"evenodd\" stroke=\"#0074DD\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286\"/>\n    </g>\n</svg>";
+
+var iconSrc = {
+  // These need to be converted to svg files instead of components and added in
+  //  "add": AddIcon,
+  //  "delete": DeleteIcon,
+  //  "edit": EditIcon,
+  close: CloseIcon,
+  hamburger: HamburgerIcon,
+  "chevron-right-blue": ChevronRightBlueIcon,
+  "chevron-left-blue": ChevronLeftBlueIcon,
+  "chevron-right-grey": ChevronRightGreyIcon,
+  "chevron-left-grey": ChevronLeftGreyIcon,
+  search: SearchIcon,
+  star: StarIcon,
+  check: checkmark,
+  "search-cancel": SearchCancelIcon
+};
+var ButtonIcon = function ButtonIcon(props) {
+  return /*#__PURE__*/createElement("img", {
+    src: iconSrc[props.name],
+    className: props.className
+  });
+};
+
+var Spinner = function Spinner(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: "w-5 h-5 animate-spin " + props.className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    className: "opacity-25",
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "4"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    className: "opacity-75",
+    fill: "currentColor",
+    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  }));
+};
+
+var ButtonV2 = function ButtonV2(props) {
+  if (!props.text && !props.icon) {
+    console.error("A text or an icon is required to use this component, please make sure to pass at least one of them as a prop.");
+    return /*#__PURE__*/React__default.createElement("span", null, "Invalid props passed to this component.");
+  }
+
+  var handleClick = function handleClick(event) {
+    if (props.type === "submit") {
+      event.preventDefault();
+    }
+
+    props.onClick(event);
+  };
+
+  var buttonClassName = classNames(["h-11", "relative flex flex-row justify-center items-center", "border", "transition-outline transition-colors duration-300 ease-in-out", "rounded-full", "leading-none", "shadow-sm", "cursor-pointer", "focus:outline-primary"], {
+    "w-11": !props.text && props.icon,
+    "px-4": props.text,
+    "py-2": props.text && props.icon,
+    "py-3": props.text && !props.icon
+  }, {
+    "opacity-50": props.isDisabled,
+    "pointer-events-none": props.isDisabled || props.isPending
+  }, props.className);
+  return /*#__PURE__*/React__default.createElement("button", {
+    className: buttonClassName,
+    type: props.type,
+    onClick: handleClick,
+    disabled: props.isDisabled,
+    "aria-disabled": props.isDisabled
+  }, props.icon && /*#__PURE__*/React__default.createElement(props.icon, {
+    className: "w-5 h-5"
+  }), props.isPending && /*#__PURE__*/React__default.createElement("span", {
+    className: "opacity-100",
+    // IE11 center translate fix
+    style: {
+      position: "absolute",
+      left: "50%",
+      top: "50%",
+      transform: "translate(-50%, -50%)"
+    }
+  }, /*#__PURE__*/React__default.createElement(Spinner, {
+    className: "text-white"
+  })), props.text && /*#__PURE__*/React__default.createElement("span", {
+    className: classNames("text-sm font-medium", {
+      invisible: props.isPending,
+      "ml-1": props.icon
+    })
+  }, props.text));
+};
+
+var PrimaryButton = function PrimaryButton(props) {
+  return /*#__PURE__*/React__default.createElement(ButtonV2, {
+    className: classNames(["text-white", "bg-blue-800", "border-transparent", "hover:bg-blue-900"]),
+    onClick: props.onClick,
+    type: props.type,
+    text: props.text,
+    icon: props.icon,
+    isDisabled: props.isDisabled,
+    isPending: props.isPending
+  });
+};
+
+var SecondaryButton = function SecondaryButton(props) {
+  return /*#__PURE__*/React__default.createElement(ButtonV2, {
+    className: classNames(["text-blue-800", "bg-white", "border-slate-300", "hover:text-blue-900", "hover:border-slate-400"]),
+    onClick: props.onClick,
+    text: props.text,
+    icon: props.icon,
+    isDisabled: props.isDisabled
+  });
+};
+
+var TertiaryButton = function TertiaryButton(props) {
+  return /*#__PURE__*/React__default.createElement(ButtonV2, {
+    className: classNames(["text-blue-800", "bg-transparent", "border-transparent", "hover:text-blue-900", "shadow-none"]),
+    onClick: props.onClick,
+    text: props.text,
+    icon: props.icon,
+    isDisabled: props.isDisabled
+  });
+};
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -277,26 +434,6 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var Spinner = function Spinner(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: "w-5 h-5 animate-spin " + props.className,
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    className: "opacity-25",
-    cx: "12",
-    cy: "12",
-    r: "10",
-    stroke: "currentColor",
-    strokeWidth: "4"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    className: "opacity-75",
-    fill: "currentColor",
-    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-  }));
-};
-
 var AddIcon = function AddIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: props.className,
@@ -424,61 +561,6 @@ var PrintIcon = function PrintIcon(props) {
   }));
 };
 
-var CloseIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.05037 5.63664C6.65984 5.24612 6.02668 5.24612 5.63615 5.63664C5.24563 6.02717 5.24563 6.66033 5.63616 7.05086L10.5862 12.0009L5.63618 16.9509C5.24566 17.3415 5.24566 17.9746 5.63618 18.3652C6.02671 18.7557 6.65987 18.7557 7.0504 18.3652L12.0004 13.4151L16.9499 18.3646C17.3404 18.7551 17.9736 18.7551 18.3641 18.3646C18.7546 17.974 18.7546 17.3409 18.3641 16.9504L13.4146 12.0009L18.3641 7.05145C18.7546 6.66093 18.7546 6.02776 18.3641 5.63724C17.9736 5.24671 17.3404 5.24671 16.9499 5.63724L12.0004 10.5867L7.05037 5.63664Z\" fill=\"#EDF2F7\"/>\n</svg>";
-
-var HamburgerIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6Z\" fill=\"#EDF2F7\"/>\n<path d=\"M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12Z\" fill=\"#EDF2F7\"/>\n<path d=\"M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H4Z\" fill=\"#EDF2F7\"/>\n</svg>";
-
-var ChevronRightBlueIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z\" fill=\"#0074DD\"/>\n</svg>";
-
-var ChevronRightGreyIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z\" fill=\"#EDF2F7\"/>\n</svg>";
-
-var ChevronLeftBlueIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z\" fill=\"#0074DD\"/>\n</svg>";
-
-var ChevronLeftGreyIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z\" fill=\"#EDF2F7\"/>\n</svg>";
-
-var SearchIcon = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.5006 11.0006H11.7106L11.4306 10.7306C12.6306 9.33063 13.2506 7.42063 12.9106 5.39063C12.4406 2.61063 10.1206 0.390626 7.32063 0.0506256C3.09063 -0.469374 -0.469374 3.09063 0.0506256 7.32063C0.390626 10.1206 2.61063 12.4406 5.39063 12.9106C7.42063 13.2506 9.33063 12.6306 10.7306 11.4306L11.0006 11.7106V12.5006L15.2506 16.7506C15.6606 17.1606 16.3306 17.1606 16.7406 16.7506C17.1506 16.3406 17.1506 15.6706 16.7406 15.2606L12.5006 11.0006ZM6.50063 11.0006C4.01063 11.0006 2.00063 8.99063 2.00063 6.50063C2.00063 4.01063 4.01063 2.00063 6.50063 2.00063C8.99063 2.00063 11.0006 4.01063 11.0006 6.50063C11.0006 8.99063 8.99063 11.0006 6.50063 11.0006Z\" fill=\"#0074DD\"/>\n</svg>";
-
-var SearchCancelIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.05086 0.636643C1.66033 0.246119 1.02717 0.246119 0.636643 0.636643C0.246119 1.02717 0.246119 1.66033 0.636643 2.05086L5.5867 7.00092L0.636672 11.9509C0.246148 12.3415 0.246148 12.9746 0.636672 13.3652C1.0272 13.7557 1.66036 13.7557 2.05089 13.3652L7.00091 8.41513L11.9503 13.3646C12.3409 13.7551 12.974 13.7551 13.3646 13.3646C13.7551 12.974 13.7551 12.3409 13.3646 11.9504L8.41513 7.00092L13.3646 2.05145C13.7551 1.66093 13.7551 1.02776 13.3646 0.637237C12.9741 0.246712 12.3409 0.246713 11.9504 0.637237L7.00092 5.5867L2.05086 0.636643Z\" fill=\"#0074DD\"/>\n</svg>";
-
-var StarIcon = "<svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.58663 1.04906C8.93899 0.258571 10.061 0.258571 10.4134 1.04906L12.1659 4.9807C12.3112 5.30673 12.6193 5.53057 12.9743 5.56804L17.2551 6.01985C18.1158 6.11069 18.4625 7.17779 17.8196 7.75718L14.6219 10.6389C14.3568 10.8778 14.2391 11.24 14.3131 11.5892L15.2063 15.8001C15.3858 16.6467 14.4781 17.3062 13.7284 16.8738L9.99962 14.7232C9.69041 14.5448 9.30959 14.5448 9.00038 14.7232L5.27159 16.8738C4.52189 17.3062 3.61416 16.6467 3.79373 15.8001L4.68686 11.5892C4.76093 11.24 4.64325 10.8778 4.37808 10.6389L1.18043 7.75718C0.537518 7.17779 0.88424 6.11069 1.74492 6.01985L6.0257 5.56804C6.38068 5.53057 6.68877 5.30673 6.8341 4.9807L8.58663 1.04906Z\" fill=\"#009FE3\"/>\n</svg>";
-
-var checkmark = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n    <g transform=\"translate(1.5, 0.5)\">\n        <path fill=\"none\" fill-rule=\"evenodd\" stroke=\"#0074DD\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286\"/>\n    </g>\n</svg>";
-
-var iconSrc = {
-  // These need to be converted to svg files instead of components and added in
-  //  "add": AddIcon,
-  //  "delete": DeleteIcon,
-  //  "edit": EditIcon,
-  close: CloseIcon,
-  hamburger: HamburgerIcon,
-  "chevron-right-blue": ChevronRightBlueIcon,
-  "chevron-left-blue": ChevronLeftBlueIcon,
-  "chevron-right-grey": ChevronRightGreyIcon,
-  "chevron-left-grey": ChevronLeftGreyIcon,
-  search: SearchIcon,
-  star: StarIcon,
-  check: checkmark,
-  "search-cancel": SearchCancelIcon
-};
-var ButtonIcon = function ButtonIcon(props) {
-  return /*#__PURE__*/createElement("img", {
-    src: iconSrc[props.name],
-    className: props.className
-  });
-};
-
-var BUTTON_ROLES = {
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  SECONDARY_DARK: "secondaryDark",
-  TERTIARY: "tertiary",
-  QUATERNARY: "quaternary",
-  NEGATIVE: "negative",
-  TEXT: "text",
-  LINK: "link",
-  ICON: "icon"
-};
-
 var _excluded = ["text", "role", "type", "title", "link", "isPending", "isDisabled", "onClick", "className", "iconName", "hasIcon", "dynamicIcon"];
 
 function Button(props) {
@@ -626,86 +708,6 @@ function Button(props) {
   }, text));
 }
 
-var ButtonV2 = function ButtonV2(props) {
-  if (!props.text && !props.icon) {
-    console.error("A text or an icon is required to use this component, please make sure to pass at least one of them as a prop.");
-    return /*#__PURE__*/React__default.createElement("span", null, "Invalid props passed to this component.");
-  }
-
-  var handleClick = function handleClick(event) {
-    if (props.type === "submit") {
-      event.preventDefault();
-    }
-
-    props.onClick(event);
-  };
-
-  var buttonClassName = classNames(["h-11", "relative flex flex-row justify-center items-center", "transition-outline transition-colors duration-300 ease-in-out", "rounded-full", "leading-none", "shadow-sm", "cursor-pointer", "focus:outline-none"], {
-    "w-11": !props.text && props.icon,
-    "px-4": props.text,
-    "py-2": props.text && props.icon,
-    "py-3": props.text && !props.icon
-  }, props.className);
-  return /*#__PURE__*/React__default.createElement("button", {
-    className: buttonClassName,
-    type: props.type,
-    onClick: handleClick,
-    disabled: props.isDisabled,
-    "aria-disabled": props.isDisabled
-  }, props.icon && /*#__PURE__*/React__default.createElement(props.icon, {
-    className: "w-5 h-5"
-  }), props.isPending && /*#__PURE__*/React__default.createElement("span", {
-    className: "opacity-100",
-    // IE11 center translate fix
-    style: {
-      position: "absolute",
-      left: "50%",
-      top: "50%",
-      transform: "translate(-50%, -50%)"
-    }
-  }, /*#__PURE__*/React__default.createElement(Spinner, {
-    className: "text-white"
-  })), props.text && /*#__PURE__*/React__default.createElement("span", {
-    className: classNames("text-sm font-medium", {
-      invisible: props.isPending,
-      "ml-1": props.icon
-    })
-  }, props.text));
-};
-
-var PrimaryButton = function PrimaryButton(props) {
-  return /*#__PURE__*/React__default.createElement(ButtonV2, {
-    className: classNames(["text-white", "bg-primary", "border", "border-solid", "border-primary-transparent", "hover:bg-primary-dark", "focus:outline-primary"], {
-      "opacity-50": props.isDisabled,
-      "pointer-events-none": props.isDisabled || props.isPending
-    }),
-    onClick: props.onClick,
-    type: props.type,
-    text: props.text,
-    icon: props.icon,
-    isDisabled: props.isDisabled,
-    isPending: props.isPending
-  });
-};
-
-var SecondaryButton = function SecondaryButton(props) {
-  return /*#__PURE__*/React__default.createElement(ButtonV2, {
-    className: classNames(["text-primary", "bg-white", "border", "border-slate-300", "hover:text-primary-dark", "hover:border-slate-400", "focus:outline-primary"]),
-    onClick: props.onClick,
-    text: props.text,
-    icon: props.icon
-  });
-};
-
-var TertiaryButton = function TertiaryButton(props) {
-  return /*#__PURE__*/React__default.createElement(ButtonV2, {
-    className: classNames(["text-primary", "bg-transparent", "border", "border-transparent", "shadow-none", "hover:text-primary-dark", "focus:outline-primary"]),
-    onClick: props.onClick,
-    text: props.text,
-    icon: props.icon
-  });
-};
-
 var GliderContainer = function GliderContainer(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative h-full pb-6 glider-contain px-17 pb-6"
@@ -4055,5 +4057,5 @@ function ViewItem(_ref) {
   })));
 }
 
-export { ACKNOWLEDGEMENT_TYPE_OPTIONS, Acknowledgement, Avatar, BUTTON_ROLES, Badge, Button, ButtonIcon, CRUDPage, Carousel, CenteredHero, Checkbox, ConfirmationDialog, Datepicker as DatePicker, Dropdown, EmptyListMessage, ErrorBlock, INPUT_TYPES, InfoBlock, InfoField, Input, Line, ListItem, ListTable, LoadingIndicator, Menu, MultiSelect, NavLayout, NavMenu, NotificationBanner, Page, PaginationMenu, PreviewPhone, PrimaryButton, Radio, RadioGroup, SecondaryButton, Section, SettingsMenuButton, Spinner, Steps, Switcher, TabLinks, Tabbar, Tag, TagGroup, TertiaryButton, Text, Textarea as TextArea, TextEditor, TextEditorV2, TextLink, TextListItem, Title, ViewItem };
+export { ACKNOWLEDGEMENT_TYPE_OPTIONS, Acknowledgement, Avatar, BUTTON_ROLES, Badge, ButtonIcon, CRUDPage, Carousel, CenteredHero, Checkbox, ConfirmationDialog, Datepicker as DatePicker, Dropdown, EmptyListMessage, ErrorBlock, INPUT_TYPES, InfoBlock, InfoField, Input, Line, ListItem, ListTable, LoadingIndicator, Menu, MultiSelect, NavLayout, NavMenu, NotificationBanner, Page, PaginationMenu, PreviewPhone, PrimaryButton, Radio, RadioGroup, SecondaryButton, Section, SettingsMenuButton, Spinner, Steps, Switcher, TabLinks, Tabbar, Tag, TagGroup, TertiaryButton, Text, Textarea as TextArea, TextEditor, TextEditorV2, TextLink, TextListItem, Title, ViewItem };
 //# sourceMappingURL=web-ui.esm.js.map