@learncard/react 2.6.55 → 2.6.56

package/dist/{esm/types.esm-b07820bb.js → cjs/VCVerificationPill-d0edd7ae.js}

@@ -1,3 +1,17 @@
+'use strict';
+
+var React = require('react');
+var VerificationFailedIcon = require('./RedXCircle.svg');
+var VerificationPassedIcon = require('./GreenCheckCircle.svg');
+var VerificationWarningIcon = require('./YellowWarningCircle.svg');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var VerificationFailedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VerificationFailedIcon);
+var VerificationPassedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VerificationPassedIcon);
+var VerificationWarningIcon__default = /*#__PURE__*/_interopDefaultLegacy(VerificationWarningIcon);
+
 var util;
 (function (util) {
     util.assertEqual = (val) => val;
@@ -4076,5 +4090,64 @@ PaginationResponseValidator.extend({
   records: ConsentFlowTransactionValidator.array()
 });
 
-export { VerificationStatusEnum as V };
-//# sourceMappingURL=types.esm-b07820bb.js.map
+const StatusToBgColor = {
+  [VerificationStatusEnum.Success]: "bg-emerald-500",
+  [VerificationStatusEnum.Failed]: "bg-yellow-400",
+  [VerificationStatusEnum.Error]: "bg-rose-600"
+};
+const StatusToTextColor = {
+  [VerificationStatusEnum.Success]: "text-emerald-700",
+  [VerificationStatusEnum.Failed]: "text-yellow-400",
+  [VerificationStatusEnum.Error]: "text-rose-600"
+};
+const StatusToIcon = {
+  [VerificationStatusEnum.Success]: VerificationPassedIcon__default["default"],
+  [VerificationStatusEnum.Failed]: VerificationWarningIcon__default["default"],
+  [VerificationStatusEnum.Error]: VerificationFailedIcon__default["default"]
+};
+const StatusToText = {
+  [VerificationStatusEnum.Success]: "Verification Success",
+  [VerificationStatusEnum.Error]: "Verification Error ",
+  [VerificationStatusEnum.Failed]: "Verification Failed"
+};
+const ValidationStateIndicator = ({ status }) => {
+  const bgColor = StatusToBgColor[status];
+  const source = StatusToIcon[status];
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `relative rounded-full w-[30px] h-[30px] ${bgColor}`
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "relative w-[100%] h-[100%] flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden"
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "h-full w-full object-contain p-1",
+    src: source != null ? source : "",
+    alt: "Verification Status Icon"
+  })));
+};
+const VCVerificationPill = ({
+  message = "",
+  details,
+  status = VerificationStatusEnum.Success
+}) => {
+  const statusColor = StatusToTextColor[status];
+  const statusInfoText = StatusToText[status];
+  return /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "flex width-full bg-white p-2 px-5 my-3.5 justify-between items-center relative vc-verification-checklist-pill rounded-[22px]"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "vc-pill-left"
+  }, /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: `text-[10px] font-bold status-text uppercase ${statusColor}`
+  }, statusInfoText), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "text-[12px] text-grayscale-900 vc-pill-text"
+  }, message), details && /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "text-[12px] text-gray-600"
+  }, " ", details)), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "vc-pill-right"
+  }, /* @__PURE__ */ React__default["default"].createElement(ValidationStateIndicator, {
+    status
+  })));
+};
+
+exports.VCVerificationPill = VCVerificationPill;
+exports.ValidationStateIndicator = ValidationStateIndicator;
+exports.VerificationStatusEnum = VerificationStatusEnum;
+//# sourceMappingURL=VCVerificationPill-d0edd7ae.js.map