'use strict';

var React = require('react');
require('./index-838fa72c.js');
var VCVerificationCheck = require('./VCVerificationCheck-92198135.js');
var UserProfilePicture = require('./UserProfilePicture-d69fe4f0.js');
var credential_helpers = require('./credential.helpers-f060ee96.js');
var VerifierStateBadgeAndText = require('./VerifierStateBadgeAndText-af68fd70.js');
require('./index-0cac2c5b.js');
var Lightbox = require('./Lightbox-d72e19ba.js');
var types_esm = require('./types.esm-4a1c2fcd.js');
var CertificateDisplayCard = require('./CertificateDisplayCard-3dd9a3f8.js');
var QRCodeIcon = require('./QRCodeIcon-3021a53b.js');
var index = require('./index-5488badc.js');
var PuzzlePiece = require('./PuzzlePiece-e64f4596.js');
var IDSleeve = require('./id-sleeve.png');
var MeritBadgeDisplayCard = require('./MeritBadgeDisplayCard-2a690a63.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var IDSleeve__default = /*#__PURE__*/_interopDefaultLegacy(IDSleeve);

const RoundedX = ({ className = "" }) => {
  return /* @__PURE__ */ React__default["default"].createElement(
    "svg",
    {
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg",
      className
    },
    /* @__PURE__ */ React__default["default"].createElement(
      "path",
      {
        d: "M18.75 5.25L5.25 18.75",
        stroke: "#18224E",
        strokeWidth: "4",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }
    ),
    /* @__PURE__ */ React__default["default"].createElement(
      "path",
      {
        d: "M18.75 18.75L5.25 5.25",
        stroke: "#18224E",
        strokeWidth: "4",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }
    )
  );
};

const FitText = ({
  text,
  width,
  className = "",
  minFontSize = 10,
  maxFontSize = 100
}) => {
  const textRef = React.useRef(null);
  let animationFrameId = null;
  const adjustFontSize = () => {
    var _a;
    if (textRef.current) {
      const currentFontSize = parseFloat(
        window.getComputedStyle(textRef.current).getPropertyValue("font-size")
      );
      textRef.current.style.whiteSpace = "nowrap";
      const parentWidth = (_a = textRef.current.parentNode) == null ? void 0 : _a.clientWidth;
      const scrollWidth = textRef.current.scrollWidth || textRef.current.offsetWidth;
      if (scrollWidth === 0) {
        if (animationFrameId !== null) {
          cancelAnimationFrame(animationFrameId);
        }
        animationFrameId = requestAnimationFrame(adjustFontSize);
        return;
      }
      const newFontSize = Math.min(
        Math.max(parentWidth / scrollWidth * currentFontSize, minFontSize),
        maxFontSize
      );
      textRef.current.style.fontSize = `${newFontSize}px`;
      textRef.current.style.whiteSpace = newFontSize === minFontSize ? "normal" : "nowrap";
    }
  };
  const handleResize = () => {
    if (animationFrameId !== null) {
      cancelAnimationFrame(animationFrameId);
    }
    animationFrameId = requestAnimationFrame(adjustFontSize);
  };
  React.useEffect(() => {
    window.addEventListener("resize", handleResize);
    adjustFontSize();
    return () => {
      window.removeEventListener("resize", handleResize);
      if (animationFrameId !== null) {
        cancelAnimationFrame(animationFrameId);
      }
    };
  }, [text]);
  return /* @__PURE__ */ React__default["default"].createElement("div", { style: { width }, className: `text-center ${className}` }, /* @__PURE__ */ React__default["default"].createElement(
    "span",
    {
      className: `text-[${minFontSize}px] transition-[font-size] whitespace-nowrap`,
      ref: textRef
    },
    text
  ));
};

const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
  const bgColorWithOpacity = `${backgroundColor}1F`;
  return /* @__PURE__ */ React__default["default"].createElement(
    "div",
    {
      className: "info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]",
      style: { backgroundColor: bgColorWithOpacity }
    },
    text,
    " ",
    /* @__PURE__ */ React__default["default"].createElement(
      "button",
      {
        onClick: (e) => {
          e.stopPropagation();
          handleClose();
        },
        className: "text-indigo-500 font-[700] select-none"
      },
      "Close"
    )
  );
};

const IssueHistoryBox = ({
  issueHistory,
  customIssueHistoryComponent
}) => {
  let renderIssueHistory = issueHistory == null ? void 0 : issueHistory.map((issueItem) => {
    return /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        className: "flex items-center issue-log-item border-b-[1px] last:border-b-0 py-[5px] border-grayscale-200 border-solid w-full",
        key: issueItem == null ? void 0 : issueItem.id
      },
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "profile-thumb-img vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement(
        UserProfilePicture.UserProfilePicture,
        {
          customContainerClass: `h-full w-full object-cover select-none text-xl ${!(issueItem == null ? void 0 : issueItem.thumb) ? "pt-[2px]" : ""}`,
          user: { image: issueItem == null ? void 0 : issueItem.thumb, name: issueItem == null ? void 0 : issueItem.name },
          alt: "profile"
        }
      )),
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "ml-[9px] flex flex-col justify-center" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "issue-item-name font-montserrat font-semibold text-grayscale-900 text-[14px] " }, issueItem == null ? void 0 : issueItem.name), /* @__PURE__ */ React__default["default"].createElement("p", { className: "issue-item-date font-montserrat  text-[12px] text-grayscale-600 " }, issueItem == null ? void 0 : issueItem.date))
    );
  });
  return /* @__PURE__ */ React__default["default"].createElement("div", { className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative" }, /* @__PURE__ */ React__default["default"].createElement("h3", { className: "text-[20px] leading-[20px] text-grayscale-900" }, "Issue Log"), !customIssueHistoryComponent ? renderIssueHistory : customIssueHistoryComponent);
};

var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
const defaultGetFileMetadata = (url) => __async(null, null, function* () {
  var _a;
  const isFilestack = url.includes("filestack");
  if (!isFilestack) return;
  const urlParams = (_a = url.split(".com/")[1]) == null ? void 0 : _a.split("/");
  if (!urlParams) return;
  const handle = urlParams[urlParams.length - 1];
  let fetchFailed = false;
  const data = yield fetch(`https://cdn.filestackcontent.com/${handle}/metadata`).then((res) => res.json()).catch(() => fetchFailed = true);
  if (fetchFailed) return;
  const fileExtension = data.filename.split(".")[1];
  return {
    fileExtension,
    sizeInBytes: data.size,
    numberOfPages: void 0
  };
});
const defaultGetVideoMetadata = (url) => __async(null, null, function* () {
  const isYoutube = url.includes("youtube");
  if (!isYoutube) return;
  const metadataUrl = `http://youtube.com/oembed?url=${url}&format=json`;
  let fetchFailed = false;
  const metadata = yield fetch(metadataUrl).then((res) => res.json()).catch(() => fetchFailed = true);
  if (fetchFailed) return;
  return {
    title: metadata.title,
    imageUrl: metadata.thumbnail_url,
    videoLength: ""
    // TODO figure out how to get this
  };
});
const MediaAttachmentsBox = ({
  attachments,
  getFileMetadata = defaultGetFileMetadata,
  getVideoMetadata = defaultGetVideoMetadata,
  onMediaAttachmentClick,
  enableLightbox = false
}) => {
  const [documentMetadata, setDocumentMetadata] = React.useState({});
  const [videoMetadata, setVideoMetadata] = React.useState({});
  const mediaAttachments = [];
  const documentsAndLinks = [];
  attachments.forEach((a) => {
    switch (a.type) {
      case "document":
      case "link":
        documentsAndLinks.push(a);
        break;
      case "photo":
      case "video":
        mediaAttachments.push(a);
        break;
    }
  });
  React.useEffect(() => {
    const getMetadata = (attachments2) => __async(null, null, function* () {
      const docMetadata = {};
      const videoMetadata2 = {};
      yield Promise.all(
        attachments2.map((attachment) => __async(null, null, function* () {
          if (attachment.type === "document") {
            docMetadata[attachment.url] = yield getFileMetadata(attachment.url);
          } else if (attachment.type === "video") {
            videoMetadata2[attachment.url] = yield getVideoMetadata(attachment.url);
          }
        }))
      );
      setVideoMetadata(videoMetadata2);
      setDocumentMetadata(docMetadata);
    });
    const videos = attachments.filter((a) => a.type === "video");
    getMetadata([...documentsAndLinks, ...videos]);
  }, []);
  const [currentLightboxUrl, setCurrentLightboxUrl] = React.useState(void 0);
  const lightboxItems = mediaAttachments.filter(
    (a) => a.type === "photo" || a.type === "video"
  );
  const handleMediaAttachmentClick = (url, type) => {
    if (type === "photo" || type === "video") {
      setCurrentLightboxUrl(url);
    }
    onMediaAttachmentClick == null ? void 0 : onMediaAttachmentClick(url, type);
  };
  return /* @__PURE__ */ React__default["default"].createElement("div", { className: "media-attachments-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full" }, /* @__PURE__ */ React__default["default"].createElement("h3", { className: "text-[20px] leading-[20px] text-grayscale-900" }, "Media Attachments"), mediaAttachments.length > 0 && /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex gap-[5px] justify-between flex-wrap w-full" }, enableLightbox && /* @__PURE__ */ React__default["default"].createElement(
    Lightbox.Lightbox,
    {
      items: lightboxItems,
      currentUrl: currentLightboxUrl,
      setCurrentUrl: setCurrentLightboxUrl
    }
  ), mediaAttachments.map((media, index) => {
    var _a, _b;
    let innerContent;
    let title = media.title;
    if (media.type === "video") {
      const metadata = videoMetadata[media.url];
      title = (_a = title || (metadata == null ? void 0 : metadata.title)) != null ? _a : "";
      const baseUrl = VerifierStateBadgeAndText.getBaseUrl(media.url);
      const iconTop = title || baseUrl;
      innerContent = /* @__PURE__ */ React__default["default"].createElement(
        "div",
        {
          className: "absolute top-0 left-0 right-0 bottom-0 bg-cover bg-no-repeat font-poppins text-white text-[12px] font-[400] leading-[17px] flex flex-col justify-end items-start p-[10px] text-left bg-rose-600 rounded-[15px]",
          style: {
            backgroundImage: (metadata == null ? void 0 : metadata.imageUrl) ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${(_b = metadata == null ? void 0 : metadata.imageUrl) != null ? _b : ""})` : void 0
          }
        },
        !(metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.VideoIcon, { size: "60", className: "m-auto" }),
        /* @__PURE__ */ React__default["default"].createElement(
          "div",
          {
            className: `absolute ${iconTop ? "top-[10px]" : "bottom-[10px]"} left-[10px] z-10 flex items-center gap-[5px]`
          },
          (metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.VideoIcon, null),
          (metadata == null ? void 0 : metadata.videoLength) && /* @__PURE__ */ React__default["default"].createElement("span", { className: "leading-[23px]" }, metadata.videoLength)
        ),
        baseUrl && /* @__PURE__ */ React__default["default"].createElement("span", { className: "font-[600]" }, baseUrl),
        title && /* @__PURE__ */ React__default["default"].createElement("span", { className: "line-clamp-2" }, title)
      );
    } else {
      innerContent = /* @__PURE__ */ React__default["default"].createElement("div", { className: "absolute top-0 left-0 right-0 bottom-0 h-full w-full flex items-center justify-center" }, /* @__PURE__ */ React__default["default"].createElement("img", { className: "rounded-[15px] object-cover h-full w-full", src: media.url }), /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.Camera, { className: "absolute bottom-[10px] left-[10px] z-10" }));
    }
    const className = `media-attachment ${media.type} w-[49%] pt-[49%] overflow-hidden relative`;
    if (onMediaAttachmentClick || enableLightbox) {
      return /* @__PURE__ */ React__default["default"].createElement(
        "button",
        {
          key: index,
          className,
          onClick: (e) => {
            e.stopPropagation();
            handleMediaAttachmentClick(media.url, media.type);
          }
        },
        innerContent
      );
    }
    return /* @__PURE__ */ React__default["default"].createElement("div", { key: index, className }, innerContent);
  })), documentsAndLinks.length > 0 && /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full flex flex-col gap-[5px]" }, documentsAndLinks.map((docOrLink, index) => {
    var _a;
    const metadata = docOrLink.type === "document" ? documentMetadata[docOrLink.url] : void 0;
    const { fileExtension, sizeInBytes, numberOfPages } = metadata != null ? metadata : {};
    let baseUrl = "";
    if (docOrLink.type === "link") {
      baseUrl = VerifierStateBadgeAndText.getBaseUrl(docOrLink.url);
    }
    const innerContent = /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col gap-[5px]" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex gap-[5px] items-center" }, docOrLink.type === "document" && /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.GenericDocumentIcon, { className: "shrink-0" }), docOrLink.type === "link" && /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.LinkIcon, { className: "shrink-0" }), /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-grayscale-900 font-[400]" }, (_a = docOrLink.title) != null ? _a : "No title")), docOrLink.type === "document" && metadata && /* @__PURE__ */ React__default["default"].createElement(
      "a",
      {
        href: docOrLink.url,
        target: "_blank",
        rel: "noreferrer",
        className: "text-grayscale-600 font-[600] px-[5px] hover:underline",
        onClick: (e) => e.stopPropagation()
      },
      fileExtension && /* @__PURE__ */ React__default["default"].createElement("span", { className: "uppercase" }, fileExtension),
      fileExtension && (numberOfPages || sizeInBytes) && " \u2022 ",
      numberOfPages && /* @__PURE__ */ React__default["default"].createElement("span", null, numberOfPages, " page", numberOfPages === 1 ? "" : "s"),
      numberOfPages && sizeInBytes && " \u2022 ",
      sizeInBytes && /* @__PURE__ */ React__default["default"].createElement("span", null, VerifierStateBadgeAndText.prettyBytes(sizeInBytes))
    ), docOrLink.type === "link" && /* @__PURE__ */ React__default["default"].createElement(
      "a",
      {
        href: docOrLink.url,
        target: "_blank",
        rel: "noreferrer",
        className: "text-indigo-500 font-[600] px-[5px] hover:underline",
        onClick: (e) => e.stopPropagation()
      },
      baseUrl
    ));
    const className = `row-attachment ${docOrLink.type} bg-grayscale-100 rounded-[15px] p-[10px] w-full font-poppins text-[12px] leading-[18px] tracking-[-0.33px] text-left`;
    if (onMediaAttachmentClick) {
      return /* @__PURE__ */ React__default["default"].createElement(
        "button",
        {
          key: index,
          className,
          onClick: (e) => {
            e.stopPropagation();
            handleMediaAttachmentClick(docOrLink.url, docOrLink.type);
          }
        },
        innerContent
      );
    }
    return /* @__PURE__ */ React__default["default"].createElement("div", { key: index, className }, innerContent);
  })));
};

const RibbonEnd = ({
  side,
  className = "",
  height = "64"
}) => {
  const halfHeight = parseInt(height) / 2;
  return /* @__PURE__ */ React__default["default"].createElement(
    "svg",
    {
      className,
      width: "30",
      height,
      viewBox: `0 0 30 ${height}`,
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg",
      style: { transform: `scaleX(${side === "left" ? "1" : "-1"})` }
    },
    /* @__PURE__ */ React__default["default"].createElement("g", { filter: "url(#filter0_d_4620_22659)" }, /* @__PURE__ */ React__default["default"].createElement("path", { d: `M0 0H30V${height}H0L6.36364 ${halfHeight}L0 0Z`, fill: "white" }), /* @__PURE__ */ React__default["default"].createElement(
      "path",
      {
        d: `M3.08593 2.5H27.5V${height}H3.08593L8.80922 ${halfHeight}L8.91926 30L8.80922 29.4812L3.08593 2.5Z`,
        stroke: "#EEF2FF",
        strokeWidth: "5"
      }
    )),
    /* @__PURE__ */ React__default["default"].createElement("defs", null, /* @__PURE__ */ React__default["default"].createElement(
      "filter",
      {
        id: "filter0_d_4620_22659",
        x: "0",
        y: "0",
        width: "30",
        height,
        filterUnits: "userSpaceOnUse",
        colorInterpolationFilters: "sRGB"
      },
      /* @__PURE__ */ React__default["default"].createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
      /* @__PURE__ */ React__default["default"].createElement(
        "feColorMatrix",
        {
          in: "SourceAlpha",
          type: "matrix",
          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
          result: "hardAlpha"
        }
      ),
      /* @__PURE__ */ React__default["default"].createElement("feOffset", { dy: "4" }),
      /* @__PURE__ */ React__default["default"].createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
      /* @__PURE__ */ React__default["default"].createElement(
        "feColorMatrix",
        {
          type: "matrix",
          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
        }
      ),
      /* @__PURE__ */ React__default["default"].createElement(
        "feBlend",
        {
          mode: "normal",
          in2: "BackgroundImageFix",
          result: "effect1_dropShadow_4620_22659"
        }
      ),
      /* @__PURE__ */ React__default["default"].createElement(
        "feBlend",
        {
          mode: "normal",
          in: "SourceGraphic",
          in2: "effect1_dropShadow_4620_22659",
          result: "shape"
        }
      )
    ))
  );
};

const TruncateTextBox = ({
  headerText = "",
  headerClassName = "",
  text,
  truncateThreshold = 132,
  children,
  className = "truncate-text-box",
  containerClassName = "",
  textClassName = ""
}) => {
  const needsTruncate = (text == null ? void 0 : text.length) > truncateThreshold;
  const [showFullText, setShowFullText] = React.useState(false);
  const truncated = needsTruncate && !showFullText;
  const displayText = truncated ? text.substring(0, truncateThreshold) : text;
  const defaultStyles = "shadow-bottom px-[15px] py-[20px]";
  return /* @__PURE__ */ React__default["default"].createElement(
    "div",
    {
      className: `${className} ${defaultStyles} bg-white flex flex-col items-start gap-[10px] rounded-[20px] w-full ${containerClassName}`
    },
    headerText && /* @__PURE__ */ React__default["default"].createElement("h3", { className: `${headerClassName} text-[20px] leading-[20px] text-grayscale-900` }, headerText),
    /* @__PURE__ */ React__default["default"].createElement(
      "p",
      {
        className: `text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] mb-0 ${textClassName}`
      },
      displayText,
      truncated && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, "...", " ", /* @__PURE__ */ React__default["default"].createElement(
        "button",
        {
          className: "text-indigo-500 font-[700]",
          onClick: (e) => {
            e.stopPropagation();
            setShowFullText(true);
          }
        },
        "More"
      )),
      needsTruncate && showFullText && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, " ", /* @__PURE__ */ React__default["default"].createElement(
        "button",
        {
          className: "text-indigo-500 font-[700]",
          onClick: (e) => {
            e.stopPropagation();
            setShowFullText(false);
          }
        },
        "Close"
      ))
    ),
    children
  );
};

/*! @license Rematrix v0.2.2

	Copyright 2018 Fisssion LLC.

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	The above copyright notice and this permission notice shall be included in
	all copies or substantial portions of the Software.

	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	THE SOFTWARE.
*/
/**
 * @module Rematrix
 */

/**
 * Transformation matrices in the browser come in two flavors:
 *
 *  - `matrix` using 6 values (short)
 *  - `matrix3d` using 16 values (long)
 *
 * This utility follows this [conversion guide](https://goo.gl/EJlUQ1)
 * to expand short form matrices to their equivalent long form.
 *
 * @param  {array} source - Accepts both short and long form matrices.
 * @return {array}
 */
function format(source) {
	if (source.constructor !== Array) {
		throw new TypeError('Expected array.')
	}
	if (source.length === 16) {
		return source
	}
	if (source.length === 6) {
		var matrix = identity();
		matrix[0] = source[0];
		matrix[1] = source[1];
		matrix[4] = source[2];
		matrix[5] = source[3];
		matrix[12] = source[4];
		matrix[13] = source[5];
		return matrix
	}
	throw new RangeError('Expected array with either 6 or 16 values.')
}

/**
 * Returns a matrix representing no transformation. The product of any matrix
 * multiplied by the identity matrix will be the original matrix.
 *
 * > **Tip:** Similar to how `5 * 1 === 5`, where `1` is the identity.
 *
 * @return {array}
 */
function identity() {
	var matrix = [];
	for (var i = 0; i < 16; i++) {
		i % 5 == 0 ? matrix.push(1) : matrix.push(0);
	}
	return matrix
}

/**
 * Returns a 4x4 matrix describing the combined transformations
 * of both arguments.
 *
 * > **Note:** Order is very important. For example, rotating 45°
 * along the Z-axis, followed by translating 500 pixels along the
 * Y-axis... is not the same as translating 500 pixels along the
 * Y-axis, followed by rotating 45° along on the Z-axis.
 *
 * @param  {array} m - Accepts both short and long form matrices.
 * @param  {array} x - Accepts both short and long form matrices.
 * @return {array}
 */
function multiply(m, x) {
	var fm = format(m);
	var fx = format(x);
	var product = [];

	for (var i = 0; i < 4; i++) {
		var row = [fm[i], fm[i + 4], fm[i + 8], fm[i + 12]];
		for (var j = 0; j < 4; j++) {
			var k = j * 4;
			var col = [fx[k], fx[k + 1], fx[k + 2], fx[k + 3]];
			var result =
				row[0] * col[0] + row[1] * col[1] + row[2] * col[2] + row[3] * col[3];

			product[i + k] = result;
		}
	}

	return product
}

/**
 * Attempts to return a 4x4 matrix describing the CSS transform
 * matrix passed in, but will return the identity matrix as a
 * fallback.
 *
 * **Tip:** In virtually all cases, this method is used to convert
 * a CSS matrix (retrieved as a `string` from computed styles) to
 * its equivalent array format.
 *
 * @param  {string} source - String containing a valid CSS `matrix` or `matrix3d` property.
 * @return {array}
 */
function parse(source) {
	if (typeof source === 'string') {
		var match = source.match(/matrix(3d)?\(([^)]+)\)/);
		if (match) {
			var raw = match[2].split(', ').map(parseFloat);
			return format(raw)
		}
	}
	return identity()
}

/**
 * Returns a 4x4 matrix describing X-axis scaling.
 *
 * @param  {number} scalar - Decimal multiplier.
 * @return {array}
 */
function scaleX(scalar) {
	var matrix = identity();
	matrix[0] = scalar;
	return matrix
}

/**
 * Returns a 4x4 matrix describing Y-axis scaling.
 *
 * @param  {number} scalar - Decimal multiplier.
 * @return {array}
 */
function scaleY(scalar) {
	var matrix = identity();
	matrix[5] = scalar;
	return matrix
}

/**
 * Returns a 4x4 matrix describing X-axis translation.
 *
 * @param  {number} distance - Measured in pixels.
 * @return {array}
 */
function translateX(distance) {
	var matrix = identity();
	matrix[12] = distance;
	return matrix
}

/**
 * Returns a 4x4 matrix describing Y-axis translation.
 *
 * @param  {number} distance - Measured in pixels.
 * @return {array}
 */
function translateY(distance) {
	var matrix = identity();
	matrix[13] = distance;
	return matrix
}

var e=function(t){return "number"==typeof t},i=function(t){return "function"==typeof t},n=function(t){return "[object Object]"===Object.prototype.toString.call(t)},r=function(t){return Array.prototype.slice.apply(t)},s$1=function(t){var e=t.reduce(function(t,e){return t[e]=(t[e]||0)+1,t},{});return Object.keys(e).filter(function(t){return e[t]>1})};function a(t){return [].slice.call(arguments,1).forEach(function(e){if(e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);}),t}var o,l=function(t,e,i){return t+(e-t)*i},p={__proto__:null,isNumber:e,isFunction:i,isObject:n,toArray:r,getDuplicateValsAsStrings:s$1,assign:a,tweenProp:l},c$1="data-flip-id",u$1="data-inverse-flip-id",d$1="data-portal-key",f$1="data-exit-container",h$1={__proto__:null,DATA_FLIP_ID:c$1,DATA_INVERSE_FLIP_ID:u$1,DATA_FLIP_COMPONENT_ID:"data-flip-component-id",DATA_FLIP_CONFIG:"data-flip-config",DATA_PORTAL_KEY:d$1,DATA_EXIT_CONTAINER:f$1},g$1={noWobble:{stiffness:200,damping:26},gentle:{stiffness:120,damping:14},veryGentle:{stiffness:130,damping:17},wobbly:{stiffness:180,damping:12},stiff:{stiffness:260,damping:26}},m$1=function(t){return n(t)?t:Object.keys(g$1).indexOf(t)>-1?g$1[t]:{}};"undefined"!=typeof window&&(o=window.requestAnimationFrame);var v$1=o=o||function(t){window.setTimeout(t,1e3/60);},y$1=Date.now(),_="object"==typeof performance&&"function"==typeof performance.now?function(){return performance.now()}:function(){return Date.now()-y$1};function S(t,e){var i=t.indexOf(e);-1!==i&&t.splice(i,1);}var E=/*#__PURE__*/function(){function t(){}return t.prototype.run=function(){var t=this;v$1(function(){t.springSystem.loop(_());});},t}(),A=function(){this.position=0,this.velocity=0;},C=0,b=.001,I=/*#__PURE__*/function(){function t(t){this._id="s"+C++,this._springSystem=t,this.listeners=[],this._startValue=0,this._currentState=new A,this._displacementFromRestThreshold=.001,this._endValue=0,this._overshootClampingEnabled=!1,this._previousState=new A,this._restSpeedThreshold=.001,this._tempState=new A,this._timeAccumulator=0,this._wasAtRest=!0,this._cachedSpringConfig={};}var e=t.prototype;return e.getId=function(){return this._id},e.destroy=function(){this.listeners=[],this._springSystem.deregisterSpring(this);},e.setSpringConfig=function(t){return this._springConfig=t,this},e.getCurrentValue=function(){return this._currentState.position},e.getDisplacementDistanceForState=function(t){return Math.abs(this._endValue-t.position)},e.setEndValue=function(t){if(t===this._endValue)return this;if(this.prevEndValue=t,this._endValue===t&&this.isAtRest())return this;this._startValue=this.getCurrentValue(),this._endValue=t,this._springSystem.activateSpring(this.getId());for(var e=0,i=this.listeners.length;e<i;e++){var n=this.listeners[e].onSpringEndStateChange;n&&n(this);}return this},e.setVelocity=function(t){return t===this._currentState.velocity||(this._currentState.velocity=t,this._springSystem.activateSpring(this.getId())),this},e.setCurrentValue=function(t){this._startValue=t,this._currentState.position=t;for(var e=0,i=this.listeners.length;e<i;e++){var n=this.listeners[e];n.onSpringUpdate&&n.onSpringUpdate(this);}return this},e.setAtRest=function(){return this._endValue=this._currentState.position,this._tempState.position=this._currentState.position,this._currentState.velocity=0,this},e.setOvershootClampingEnabled=function(t){return this._overshootClampingEnabled=t,this},e.isOvershooting=function(){var t=this._startValue,e=this._endValue;return this._springConfig.tension>0&&(t<e&&this.getCurrentValue()>e||t>e&&this.getCurrentValue()<e)},e.advance=function(t,e){var i=this.isAtRest();if(!i||!this._wasAtRest){var n=e;e>.064&&(n=.064),this._timeAccumulator+=n;for(var r,s,a,o,l,p,c=this._springConfig.tension,u=this._springConfig.friction,d=this._currentState.position,f=this._currentState.velocity,h=this._tempState.position,g=this._tempState.velocity;this._timeAccumulator>=b;)this._timeAccumulator-=b,this._timeAccumulator<b&&(this._previousState.position=d,this._previousState.velocity=f),s=c*(this._endValue-h)-u*f,o=c*(this._endValue-(h=d+(r=f)*b*.5))-u*(g=f+s*b*.5),p=c*(this._endValue-(h=d+(a=g)*b*.5))-u*(g=f+o*b*.5),h=d+(l=g)*b,d+=1/6*(r+2*(a+l)+(g=f+p*b))*b,f+=1/6*(s+2*(o+p)+(c*(this._endValue-h)-u*g))*b;this._tempState.position=h,this._tempState.velocity=g,this._currentState.position=d,this._currentState.velocity=f,this._timeAccumulator>0&&this._interpolate(this._timeAccumulator/b),(this.isAtRest()||this._overshootClampingEnabled&&this.isOvershooting())&&(this._springConfig.tension>0?(this._startValue=this._endValue,this._currentState.position=this._endValue):(this._endValue=this._currentState.position,this._startValue=this._endValue),this.setVelocity(0),i=!0);var m=!1;this._wasAtRest&&(this._wasAtRest=!1,m=!0);var v=!1;i&&(this._wasAtRest=!0,v=!0),this.notifyPositionUpdated(m,v);}},e.notifyPositionUpdated=function(t,e){var i=this;this.listeners.filter(Boolean).forEach(function(n){t&&n.onSpringActivate&&!i._onActivateCalled&&(n.onSpringActivate(i),i._onActivateCalled=!0),n.onSpringUpdate&&n.onSpringUpdate(i),e&&n.onSpringAtRest&&n.onSpringAtRest(i);});},e.systemShouldAdvance=function(){return !this.isAtRest()||!this.wasAtRest()},e.wasAtRest=function(){return this._wasAtRest},e.isAtRest=function(){return Math.abs(this._currentState.velocity)<this._restSpeedThreshold&&(this.getDisplacementDistanceForState(this._currentState)<=this._displacementFromRestThreshold||0===this._springConfig.tension)},e._interpolate=function(t){this._currentState.position=this._currentState.position*t+this._previousState.position*(1-t),this._currentState.velocity=this._currentState.velocity*t+this._previousState.velocity*(1-t);},e.addListener=function(t){return this.listeners.push(t),this},e.addOneTimeListener=function(t){var e=this;return Object.keys(t).forEach(function(i){var n;t[i]=(n=t[i],function(){n.apply(void 0,[].slice.call(arguments)),e.removeListener(t);});}),this.listeners.push(t),this},e.removeListener=function(t){return S(this.listeners,t),this},t}(),w=/*#__PURE__*/function(){function t(t){this.looper=t||new E,this.looper.springSystem=this,this.listeners=[],this._activeSprings=[],this._idleSpringIndices=[],this._isIdle=!0,this._lastTimeMillis=-1,this._springRegistry={};}var e=t.prototype;return e.createSpring=function(t,e){return this.createSpringWithConfig({tension:t,friction:e})},e.createSpringWithConfig=function(t){var e=new I(this);return this.registerSpring(e),e.setSpringConfig(t),e},e.getIsIdle=function(){return this._isIdle},e.registerSpring=function(t){this._springRegistry[t.getId()]=t;},e.deregisterSpring=function(t){S(this._activeSprings,t),delete this._springRegistry[t.getId()];},e.advance=function(t,e){for(var i=this;this._idleSpringIndices.length>0;)this._idleSpringIndices.pop();for(this._activeSprings.filter(Boolean).forEach(function(n){n.systemShouldAdvance()?n.advance(t/1e3,e/1e3):i._idleSpringIndices.push(i._activeSprings.indexOf(n));});this._idleSpringIndices.length>0;){var n=this._idleSpringIndices.pop();n>=0&&this._activeSprings.splice(n,1);}},e.loop=function(t){var e;-1===this._lastTimeMillis&&(this._lastTimeMillis=t-1);var i=t-this._lastTimeMillis;this._lastTimeMillis=t;var n=0,r=this.listeners.length;for(n=0;n<r;n++)(e=this.listeners[n]).onBeforeIntegrate&&e.onBeforeIntegrate(this);for(this.advance(t,i),0===this._activeSprings.length&&(this._isIdle=!0,this._lastTimeMillis=-1),n=0;n<r;n++)(e=this.listeners[n]).onAfterIntegrate&&e.onAfterIntegrate(this);this._isIdle||this.looper.run();},e.activateSpring=function(t){var e=this._springRegistry[t];-1===this._activeSprings.indexOf(e)&&this._activeSprings.push(e),this.getIsIdle()&&(this._isIdle=!1,this.looper.run());},t}(),O=new w,x=function(t){var e=t.springConfig,i=e.overshootClamping,n=t.getOnUpdateFunc,r=t.onAnimationEnd,s=t.onSpringActivate,a=O.createSpring(e.stiffness,e.damping);a.setOvershootClampingEnabled(!!i);var o={onSpringActivate:s,onSpringAtRest:function(){a.destroy(),r();},onSpringUpdate:n({spring:a,onAnimationEnd:r})};return a.addListener(o),a},U=function(t){var e=x(t);return e.setEndValue(1),e},V=function(t,e){if(void 0===e&&(e={}),t&&t.length){e.reverse&&t.reverse();var i,n="number"!=typeof(i=e.speed)?1.1:1+Math.min(Math.max(5*i,0),5),r=1/Math.max(Math.min(t.length,100),10),s=t.map(function(t,e){var i=t.getOnUpdateFunc;return t.getOnUpdateFunc=function(t){var a=i(t);return function(t){var i=t.getCurrentValue();(i=i<.01?0:i>.99?1:i)>=r&&s[e+1]&&s[e+1](Math.max(Math.min(i*n,1),0)),a(t);}},t}).map(function(t){var e=x(t);if(e)return e.setEndValue.bind(e)}).filter(Boolean);s[0]&&s[0](1);}},F=function(t){return [0,1,4,5,12,13].map(function(e){return t[e]})},P=function(t){return t.top<window.innerHeight&&t.bottom>0&&t.left<window.innerWidth&&t.right>0};function D(t){return JSON.parse(t.dataset.flipConfig||"{}")}var R=function(t,e){var i;return a(t,((i={})[e[0]]=e[1],i))},T=function(t,e){return r(e?document.querySelectorAll("["+d$1+'="'+e+'"]'):t.querySelectorAll("["+c$1+"]"))},M=function(t){return t.map(function(t){return [t,t.getBoundingClientRect()]})},L=function(n){var o=n.cachedOrderedFlipIds,p=void 0===o?[]:o,f=n.inProgressAnimations,h=void 0===f?{}:f,v=n.flippedElementPositionsBeforeUpdate,y=void 0===v?{}:v,_=n.flipCallbacks,S=void 0===_?{}:_,E=n.containerEl,A=n.applyTransformOrigin,C=n.spring,b=n.debug,I=n.portalKey,w=n.staggerConfig,O=void 0===w?{}:w,x=n.decisionData,j=void 0===x?{}:x,B=n.handleEnterUpdateDelete,N=n.onComplete,L=n.onStart;if(!window.matchMedia("(prefers-reduced-motion: reduce)").matches){var q,X=M(T((q={element:E,portalKey:I}).element,q.portalKey)).map(function(t){var e=t[0],i=t[1],n=window.getComputedStyle(e);return [e.dataset.flipId,{element:e,rect:i,opacity:parseFloat(n.opacity),transform:n.transform}]}).reduce(R,{}),Y=function(t){var e=t.containerEl,i=t.portalKey;return i?function(t){return function(e){return r(document.querySelectorAll("["+d$1+'="'+t+'"]'+e))}}(i):e?function(t){var e=Math.random().toFixed(5);return t.dataset.flipperId=e,function(i){return r(t.querySelectorAll('[data-flipper-id="'+e+'"] '+i))}}(e):function(){return []}}({containerEl:E,portalKey:I}),W=function(t){return function(e){return t("["+c$1+'="'+e+'"]')[0]}}(Y),K=function(t){return y[t]&&X[t]},H=Object.keys(y).concat(Object.keys(X)).filter(function(t){return !K(t)}),J={flipCallbacks:S,getElement:W,flippedElementPositionsBeforeUpdate:y,flippedElementPositionsAfterUpdate:X,inProgressAnimations:h,decisionData:j},z=function(t){var e,i=t.unflippedIds,n=t.flipCallbacks,r=t.getElement,s=t.flippedElementPositionsBeforeUpdate,a=t.flippedElementPositionsAfterUpdate,o=t.inProgressAnimations,l=t.decisionData,p=i.filter(function(t){return a[t]}).filter(function(t){return n[t]&&n[t].onAppear}),c=i.filter(function(t){return s[t]&&n[t]&&n[t].onExit}),u=new Promise(function(t){e=t;}),d=[],f=0,h=c.map(function(t,i){var r=s[t].domDataForExitAnimations,a=r.element,p=r.parent,c=r.childPosition,u=c.top,h=c.left,g=c.width,m=c.height;"static"===getComputedStyle(p).position&&(p.style.position="relative"),a.style.transform="matrix(1, 0, 0, 1, 0, 0)",a.style.position="absolute",a.style.top=u+"px",a.style.left=h+"px",a.style.height=m+"px",a.style.width=g+"px";var v=d.filter(function(t){return t[0]===p})[0];v||(v=[p,document.createDocumentFragment()],d.push(v)),v[1].appendChild(a),f+=1;var y=function(){try{p.removeChild(a);}catch(t){}finally{0==(f-=1)&&e();}};return o[t]={stop:y},function(){return n[t].onExit(a,i,y,l)}});return d.forEach(function(t){t[0].appendChild(t[1]);}),h.length||e(),{hideEnteringElements:function(){p.forEach(function(t){var e=r(t);e&&(e.style.opacity="0");});},animateEnteringElements:function(){p.forEach(function(t,e){var i=r(t);i&&n[t].onAppear(i,e,l);});},animateExitingElements:function(){return h.forEach(function(t){return t()}),u}}}(a({},J,{unflippedIds:H})),G=z.hideEnteringElements,Q=z.animateEnteringElements,Z=z.animateExitingElements,$=a({},J,{containerEl:E,flippedIds:p.filter(K),applyTransformOrigin:A,spring:C,debug:b,staggerConfig:O,scopedSelector:Y,onComplete:N});L&&L(E,j);var tt=function(n){var o,p=n.flippedIds,c=n.flipCallbacks,d=n.inProgressAnimations,f=n.flippedElementPositionsBeforeUpdate,h=n.flippedElementPositionsAfterUpdate,v=n.applyTransformOrigin,y=n.spring,_=n.getElement,S=n.debug,E=n.staggerConfig,A=void 0===E?{}:E,C=n.decisionData,b=void 0===C?{}:C,I=n.onComplete,w=n.containerEl,O=new Promise(function(t){o=t;});if(I&&O.then(function(){return I(w,b)}),!p.length)return function(){return o([]),O};var x=[],R=_(p[0]),T=R?R.ownerDocument.querySelector("body"):document.querySelector("body");s$1(p);var M=p.map(function(n){var s=f[n].rect,p=h[n].rect,_=f[n].opacity,S=h[n].opacity,E=p.width<1||p.height<1,A=h[n].element;if(!P(s)&&!P(p))return !1;if(!A)return !1;var C,I,w,O=D(A),U=(w=(I=void 0===(C={flipperSpring:y,flippedSpring:O.spring})?{}:C).flippedSpring,a({},g$1.noWobble,m$1(I.flipperSpring),m$1(w))),V=!0===O.stagger?"default":O.stagger,R={element:A,id:n,stagger:V,springConfig:U};if(c[n]&&c[n].shouldFlip&&!c[n].shouldFlip(b.previous,b.current))return !1;var k=Math.abs(s.left-p.left)+Math.abs(s.top-p.top),j=Math.abs(s.width-p.width)+Math.abs(s.height-p.height),B=Math.abs(S-_);if(0===s.height&&0===p.height||0===s.width&&0===p.width||k<.5&&j<.5&&B<.01)return !1;var N=parse(h[n].transform),L={matrix:N},q={matrix:[]},X=[N];O.translate&&(X.push(translateX(s.left-p.left)),X.push(translateY(s.top-p.top))),O.scale&&(X.push(scaleX(Math.max(s.width,1)/Math.max(p.width,1))),X.push(scaleY(Math.max(s.height,1)/Math.max(p.height,1)))),O.opacity&&(q.opacity=_,L.opacity=S);var Y=[];if(!c[n]||!c[n].shouldInvert||c[n].shouldInvert(b.previous,b.current)){var W=function(t,e){return r(t.querySelectorAll("["+u$1+'="'+e+'"]'))}(A,n);Y=W.map(function(t){return [t,D(t)]});}q.matrix=F(X.reduce(multiply)),L.matrix=F(L.matrix);var K,H=function(t){var i=t.element,n=t.invertedChildren,r=t.body;return function(t){var s=t.matrix,a=t.opacity,o=t.forceMinVals;if(e(a)&&(i.style.opacity=a+""),o&&(i.style.minHeight="1px",i.style.minWidth="1px"),s){var l=function(t){return "matrix("+t.join(", ")+")"}(s);i.style.transform=l,n&&function(t){var e=t.matrix,i=t.body;t.invertedChildren.forEach(function(t){var n=t[0],r=t[1];if(i.contains(n)){var s=e[0],a=e[3],o=e[5],l={translateX:0,translateY:0,scaleX:1,scaleY:1},p="";r.translate&&(l.translateX=-e[4]/s,l.translateY=-o/a,p+="translate("+l.translateX+"px, "+l.translateY+"px)"),r.scale&&(l.scaleX=1/s,l.scaleY=1/a,p+=" scale("+l.scaleX+", "+l.scaleY+")"),n.style.transform=p;}});}({invertedChildren:n,matrix:s,body:r});}}}({element:A,invertedChildren:Y,body:T});if(c[n]&&c[n].onComplete){var J=c[n].onComplete;K=function(){return J(A,b)};}var z=e(q.opacity)&&e(L.opacity)&&q.opacity!==L.opacity,G=!1;return a({},R,{stagger:V,springConfig:U,getOnUpdateFunc:function(t){var e=t.spring,i=t.onAnimationEnd;return d[n]={destroy:e.destroy.bind(e),onAnimationEnd:i},function(t){c[n]&&c[n].onSpringUpdate&&c[n].onSpringUpdate(t.getCurrentValue()),G||(G=!0,c[n]&&c[n].onStart&&c[n].onStart(A,b));var e=t.getCurrentValue();if(T.contains(A)){var i={matrix:[]};i.matrix=q.matrix.map(function(t,i){return l(t,L.matrix[i],e)}),z&&(i.opacity=l(q.opacity,L.opacity,e)),H(i);}else t.destroy();}},initializeFlip:function(){H({matrix:q.matrix,opacity:z?q.opacity:void 0,forceMinVals:E}),c[n]&&c[n].onStartImmediate&&c[n].onStartImmediate(A,b),O.transformOrigin?A.style.transformOrigin=O.transformOrigin:v&&(A.style.transformOrigin="0 0"),Y.forEach(function(t){var e=t[0],i=t[1];i.transformOrigin?e.style.transformOrigin=i.transformOrigin:v&&(e.style.transformOrigin="0 0");});},onAnimationEnd:function(t){delete d[n],i(K)&&K(),A.style.transform="",Y.forEach(function(t){t[0].style.transform="";}),E&&A&&(A.style.minHeight="",A.style.minWidth=""),t||(x.push(n),x.length>=M.length&&o(x));},delayUntil:O.delayUntil})}).filter(Boolean);if(M.forEach(function(t){return (0, t.initializeFlip)()}),S)return function(){};var k=M.filter(function(t){return t.delayUntil&&(e=t.delayUntil,M.filter(function(t){return t.id===e}).length);var e;}),j={},B={},N={};k.forEach(function(t){t.stagger?(N[t.stagger]=!0,B[t.delayUntil]?B[t.delayUntil].push(t.stagger):B[t.delayUntil]=[t.stagger]):j[t.delayUntil]?j[t.delayUntil].push(t):j[t.delayUntil]=[t];});var L=M.filter(function(t){return t.stagger}).reduce(function(t,e){return t[e.stagger]?t[e.stagger].push(e):t[e.stagger]=[e],t},{}),q=M.filter(function(t){return -1===k.indexOf(t)});return q.forEach(function(t){t.onSpringActivate=function(){j[t.id]&&j[t.id].forEach(U),B[t.id]&&Object.keys(B[t.id].reduce(function(t,e){var i;return a(t,((i={})[e]=!0,i))},{})).forEach(function(t){V(L[t],A[t]);});};}),function(){return M.length||o([]),q.filter(function(t){return !t.stagger}).forEach(U),Object.keys(L).forEach(function(t){N[t]||V(L[t],A[t]);}),O}}($);B?B({hideEnteringElements:G,animateEnteringElements:Q,animateExitingElements:Z,animateFlippedElements:tt}):(G(),Z().then(Q),tt());}},q=function(t){var e=t.element,i=t.flipCallbacks,n=void 0===i?{}:i,s=t.inProgressAnimations,o=void 0===s?{}:s,l=T(e,t.portalKey),p=r(e.querySelectorAll("["+u$1+"]")),c={},d=[],h={};l.filter(function(t){return n&&n[t.dataset.flipId]&&n[t.dataset.flipId].onExit}).forEach(function(t){var e=t.parentNode;if(t.closest){var i=t.closest("["+f$1+"]");i&&(e=i);}var n=d.findIndex(function(t){return t[0]===e});-1===n&&(d.push([e,e.getBoundingClientRect()]),n=d.length-1),c[t.dataset.flipId]=d[n][1],h[t.dataset.flipId]=e;});var g=M(l),m=g.map(function(t){var e=t[0],i=t[1],r={};if(n&&n[e.dataset.flipId]&&n[e.dataset.flipId].onExit){var s=c[e.dataset.flipId];a(r,{element:e,parent:h[e.dataset.flipId],childPosition:{top:i.top-s.top,left:i.left-s.left,width:i.width,height:i.height}});}return [e.dataset.flipId,{rect:i,opacity:parseFloat(window.getComputedStyle(e).opacity||"1"),domDataForExitAnimations:r}]}).reduce(R,{});return function(t,e){Object.keys(t).forEach(function(e){t[e].destroy&&t[e].destroy(),t[e].onAnimationEnd&&t[e].onAnimationEnd(!0),delete t[e];}),e.forEach(function(t){t.style.transform="",t.style.opacity="";});}(o,l.concat(p)),{flippedElementPositions:m,cachedOrderedFlipIds:g.map(function(t){return t[0].dataset.flipId})}};new w;

function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},s.apply(this,arguments)}function c(e,t){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},c(e,t)}function d(e,t){if(null==e)return {};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(i[r]=e[r]);return i}var f=/*#__PURE__*/React.createContext({}),u=/*#__PURE__*/React.createContext("portal"),h=/*#__PURE__*/function(r){var n,o;function p(){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];return (e=r.call.apply(r,[this].concat(n))||this).inProgressAnimations={},e.flipCallbacks={},e.el=void 0,e}o=r,(n=p).prototype=Object.create(o.prototype),n.prototype.constructor=n,c(n,o);var l=p.prototype;return l.getSnapshotBeforeUpdate=function(t){return t.flipKey!==this.props.flipKey&&this.el?q({element:this.el,flipCallbacks:this.flipCallbacks,inProgressAnimations:this.inProgressAnimations,portalKey:this.props.portalKey}):null},l.componentDidUpdate=function(e,r,n){this.props.flipKey!==e.flipKey&&this.el&&L({flippedElementPositionsBeforeUpdate:n.flippedElementPositions,cachedOrderedFlipIds:n.cachedOrderedFlipIds,containerEl:this.el,inProgressAnimations:this.inProgressAnimations,flipCallbacks:this.flipCallbacks,applyTransformOrigin:this.props.applyTransformOrigin,spring:this.props.spring,debug:this.props.debug,portalKey:this.props.portalKey,staggerConfig:this.props.staggerConfig,handleEnterUpdateDelete:this.props.handleEnterUpdateDelete,decisionData:{previous:e.decisionData,current:this.props.decisionData},onComplete:this.props.onComplete,onStart:this.props.onStart});},l.render=function(){var e=this,t=this.props,r=t.portalKey,n=/*#__PURE__*/React__default["default"].createElement(f.Provider,{value:this.flipCallbacks},/*#__PURE__*/React__default["default"].createElement(t.element,{className:t.className,ref:function(t){return e.el=t}},this.props.children));return r&&(n=/*#__PURE__*/React__default["default"].createElement(u.Provider,{value:r},n)),n},p}(React.Component);h.defaultProps={applyTransformOrigin:!0,element:"div"};var m=["children","flipId","inverseFlipId","portalKey"],y=["children","flipId","shouldFlip","shouldInvert","onAppear","onStart","onStartImmediate","onComplete","onExit","onSpringUpdate"],g=function(e){var t,i=e.children,o=e.flipId,p$1=e.inverseFlipId,s=e.portalKey,c=d(e,m),f=i,u=function(e){return "function"==typeof e}(f);if(!u)try{f=React.Children.only(i);}catch(e){throw new Error("Each Flipped component must wrap a single child")}c.scale||c.translate||c.opacity||p.assign(c,{translate:!0,scale:!0,opacity:!0});var h=((t={})[h$1.DATA_FLIP_CONFIG]=JSON.stringify(c),t);return void 0!==o?h[h$1.DATA_FLIP_ID]=String(o):p$1&&(h[h$1.DATA_INVERSE_FLIP_ID]=String(p$1)),void 0!==s&&(h[h$1.DATA_PORTAL_KEY]=s),u?f(h):/*#__PURE__*/React.cloneElement(f,h)},v=function(e){var t=e.children,n=e.flipId,o=e.shouldFlip,p$1=e.shouldInvert,l=e.onAppear,a=e.onStart,c=e.onStartImmediate,h=e.onComplete,m=e.onExit,v=e.onSpringUpdate,I=d(e,y);return t?I.inverseFlipId?/*#__PURE__*/React__default["default"].createElement(g,s({},I),t):/*#__PURE__*/React__default["default"].createElement(u.Consumer,null,function(e){return React__default["default"].createElement(f.Consumer,null,function(d){return p.isObject(d)&&n&&(d[n]={shouldFlip:o,shouldInvert:p$1,onAppear:l,onStart:a,onStartImmediate:c,onComplete:h,onExit:m,onSpringUpdate:v}),/*#__PURE__*/React__default["default"].createElement(g,s({flipId:n},I,{portalKey:e}),t)})}):null};v.displayName="Flipped";

const VerificationRow = ({ verification }) => {
  var _a, _b;
  const [showInfo, setShowInfo] = React.useState(false);
  const statusColor = credential_helpers.getColorForVerificationStatus(verification.status);
  const getIcon = () => {
    switch (verification.status) {
      case types_esm.VerificationStatusEnum.Success:
        return /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.AcuteCheckmark, null);
      case types_esm.VerificationStatusEnum.Error:
        return /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.ExclamationPoint, null);
      case types_esm.VerificationStatusEnum.Failed:
        return /* @__PURE__ */ React__default["default"].createElement(Lightbox.X, { className: "w-[15px] h-[15px]" });
    }
  };
  let primaryText = verification.check ? `${verification.check}: ${verification.message}` : verification.message;
  if (verification.status === types_esm.VerificationStatusEnum.Failed) {
    primaryText = (_b = (_a = verification.message) != null ? _a : verification.details) != null ? _b : "";
  }
  primaryText = VerifierStateBadgeAndText.capitalize(primaryText);
  const infoText = "";
  return /* @__PURE__ */ React__default["default"].createElement("div", { className: "verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0" }, /* @__PURE__ */ React__default["default"].createElement(
    "span",
    {
      className: "font-[700] text-[11px] leading-[16px] uppercase flex items-center gap-[3px] select-none",
      style: { color: statusColor }
    },
    getIcon(),
    verification.status,
    infoText 
  ), showInfo && infoText && /* @__PURE__ */ React__default["default"].createElement(
    InfoBox,
    {
      text: infoText,
      handleClose: () => setShowInfo(false),
      backgroundColor: statusColor
    }
  ), /* @__PURE__ */ React__default["default"].createElement("span", { className: "font-[400] text-[14px] leading-[21px] text-grayscale-900" }, primaryText));
};

const VerificationsBox = ({ verificationItems }) => {
  const [showInfo, setShowInfo] = React.useState(false);
  return /* @__PURE__ */ React__default["default"].createElement("div", { className: "verifications-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative" }, /* @__PURE__ */ React__default["default"].createElement("h3", { className: "text-[20px] leading-[20px] text-grayscale-900" }, "Credential Verifications"), /* @__PURE__ */ React__default["default"].createElement(
    "button",
    {
      className: "absolute top-[17px] right-[17px]",
      onClick: (e) => {
        e.stopPropagation();
        setShowInfo(!showInfo);
      }
    },
    /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.InfoIcon, { color: showInfo ? "#6366F1" : void 0 })
  ), showInfo && /* @__PURE__ */ React__default["default"].createElement(
    InfoBox,
    {
      text: "Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy.",
      handleClose: () => setShowInfo(false)
    }
  ), verificationItems.map((verification, index) => /* @__PURE__ */ React__default["default"].createElement(VerificationRow, { key: index, verification })));
};

const VC2BackFace = ({
  credential,
  verificationItems,
  // convertTagsToSkills = defaultTagsToSkills,
  getFileMetadata,
  getVideoMetadata,
  onMediaAttachmentClick,
  issueHistory,
  showBackButton,
  showFrontFace,
  customDescription,
  customCriteria,
  customSkillsComponent,
  customIssueHistoryComponent,
  enableLightbox,
  customLinkedCredentialsComponent
}) => {
  var _a, _b, _c, _d;
  const expiration = credential.expirationDate ? credential_helpers.format(new Date(credential.expirationDate), "MMM dd, yyyy") : void 0;
  const isExpired = credential.expirationDate && Number(new Date(credential.expirationDate)) < Number(/* @__PURE__ */ new Date());
  const achievement = "achievement" in credential.credentialSubject ? credential.credentialSubject.achievement : void 0;
  const criteria = (_a = achievement == null ? void 0 : achievement.criteria) == null ? void 0 : _a.narrative;
  const description = achievement == null ? void 0 : achievement.description;
  const alignment = achievement == null ? void 0 : achievement.alignment;
  return /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React__default["default"].createElement("section", { className: "vc-back-face flex flex-col gap-[20px] w-full px-[15px] pb-[25px]" }, showBackButton && /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full" }, /* @__PURE__ */ React__default["default"].createElement(
    "button",
    {
      className: "vc-card-back-button rounded-full h-[50px] px-[15px] flex items-center justify-center gap-[5px] z-50 text-[30px] text-white select-none",
      onClick: showFrontFace
    },
    /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.LeftArrow, { className: "text-white", size: "25" }),
    "Details"
  )), customDescription && /* @__PURE__ */ React__default["default"].createElement(
    TruncateTextBox,
    {
      headerText: "About",
      text: description,
      className: "description-box"
    },
    customDescription
  ), !customDescription && (description || expiration) && /* @__PURE__ */ React__default["default"].createElement(
    TruncateTextBox,
    {
      headerText: "About",
      text: description,
      className: "description-box"
    },
    expiration && /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-grayscale-800 font-poppins font-[600] text-[12px] leading-[18px] mb-0" }, "Expire", isExpired ? "d" : "s", " on ", expiration)
  ), customCriteria && /* @__PURE__ */ React__default["default"].createElement(
    TruncateTextBox,
    {
      headerText: "Criteria",
      text: description,
      className: "description-box"
    },
    customCriteria
  ), !customCriteria && criteria && /* @__PURE__ */ React__default["default"].createElement(
    TruncateTextBox,
    {
      headerText: "Criteria",
      text: criteria,
      className: "criteria-box"
    }
  ), customLinkedCredentialsComponent && customLinkedCredentialsComponent, ((_c = (_b = credential.skills) == null ? void 0 : _b.length) != null ? _c : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.SkillsBox, { skills: (_d = credential.skills) != null ? _d : [] })), issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 0 && /* @__PURE__ */ React__default["default"].createElement(
    IssueHistoryBox,
    {
      issueHistory,
      customIssueHistoryComponent
    }
  ), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React__default["default"].createElement(
    MediaAttachmentsBox,
    {
      attachments: credential.attachments,
      getFileMetadata,
      getVideoMetadata,
      onMediaAttachmentClick,
      enableLightbox
    }
  ), alignment && /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.AlignmentsBox, { alignment, style: "boost" }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React__default["default"].createElement(VerificationsBox, { verificationItems })));
};

const VC2FrontFaceInfo = ({
  credential,
  issuee,
  issuer,
  subjectDID,
  subjectImageComponent,
  issuerImageComponent,
  customBodyCardComponent,
  createdAt,
  imageUrl,
  customThumbComponent,
  knownDIDRegistry,
  customBodyContentSlot,
  unknownVerifierTitle
}) => {
  const issuerName = VerifierStateBadgeAndText.truncateWithEllipsis(credential_helpers.getNameFromProfile(issuer != null ? issuer : ""), 20);
  const issueeName = VerifierStateBadgeAndText.truncateWithEllipsis(credential_helpers.getNameFromProfile(issuee != null ? issuee : ""), 25);
  const issuerImage = credential_helpers.getImageFromProfile(issuer != null ? issuer : "");
  const issueeImage = credential_helpers.getImageFromProfile(issuee != null ? issuee : "");
  const { credentialSubject } = credential_helpers.getInfoFromCredential(credential, "MMM dd, yyyy", {
    uppercaseDate: false
  });
  const getImageElement = (imageUrl2, alt, overrideComponent, bigText) => {
    if (overrideComponent) return overrideComponent;
    return /* @__PURE__ */ React__default["default"].createElement(
      UserProfilePicture.UserProfilePicture,
      {
        user: { image: imageUrl2, name: issueeName },
        alt,
        customContainerClass: `h-full w-full ${bigText ? "!text-4xl" : ""}`
      }
    );
  };
  const issueeImageEl = getImageElement(
    issueeImage,
    "Issuee image",
    subjectImageComponent,
    true
  );
  const issuerImageEl = getImageElement(
    issuerImage,
    "Issuer image",
    issuerImageComponent
  );
  const issuerDid = typeof credential.issuer === "string" ? credential.issuer : credential.issuer.id;
  const isAppIssuerDid = VerifierStateBadgeAndText.isAppDidWeb(issuerDid);
  let verifierState;
  if ((credentialSubject == null ? void 0 : credentialSubject.id) === issuerDid && issuerDid && issuerDid !== "did:example:123") {
    verifierState = VerifierStateBadgeAndText.VERIFIER_STATES.selfVerified;
  } else if (unknownVerifierTitle) {
    verifierState = VerifierStateBadgeAndText.VERIFIER_STATES.trustedVerifier;
  } else {
    if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "trusted") {
      verifierState = VerifierStateBadgeAndText.VERIFIER_STATES.trustedVerifier;
    } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "untrusted") {
      verifierState = VerifierStateBadgeAndText.VERIFIER_STATES.untrustedVerifier;
    } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "unknown") {
      verifierState = isAppIssuerDid ? VerifierStateBadgeAndText.VERIFIER_STATES.appIssuer : VerifierStateBadgeAndText.VERIFIER_STATES.unknownVerifier;
    } else {
      verifierState = isAppIssuerDid ? VerifierStateBadgeAndText.VERIFIER_STATES.appIssuer : VerifierStateBadgeAndText.VERIFIER_STATES.unknownVerifier;
    }
  }
  return /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React__default["default"].createElement("section", { className: "vc-front-face w-full px-[15px] flex flex-col items-center gap-[15px]" }, imageUrl && !customThumbComponent && /* @__PURE__ */ React__default["default"].createElement(
    "img",
    {
      className: "vc-front-image h-[130px] w-[130px] rounded-[10px]",
      src: imageUrl
    }
  ), customThumbComponent && customThumbComponent, /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-issue-info-box bg-white flex flex-col items-center gap-[5px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full" }, customBodyCardComponent && customBodyCardComponent, !customBodyCardComponent && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("h3", { className: "text-[27px] flex flex-col text-center leading-[130%] text-grayscale-900 capitalize" }, issueeName, subjectDID && /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] m-0 p-0 normal-case" }, subjectDID)), /* @__PURE__ */ React__default["default"].createElement("div", { className: "relative" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-issuee-image h-[60px] w-[60px] rounded-full overflow-hidden" }, issueeImageEl), /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-issuer-image h-[30px] w-[30px] rounded-full overflow-hidden absolute bottom-[-12px] right-[-12px]" }, issuerImageEl)), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col gap-[13px]" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-issue-details mt-[10px] flex flex-col items-center font-montserrat text-[14px] leading-[20px]" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "created-at text-grayscale-700" }, createdAt), /* @__PURE__ */ React__default["default"].createElement("span", { className: "issued-by text-grayscale-900 font-[500]" }, "by ", /* @__PURE__ */ React__default["default"].createElement("strong", { className: "font-[700]" }, issuerName))), /* @__PURE__ */ React__default["default"].createElement(
    VerifierStateBadgeAndText.VerifierStateBadgeAndText,
    {
      verifierState,
      unknownVerifierTitle
    }
  ))), customBodyContentSlot && customBodyContentSlot)));
};

const VCDisplayCardCategoryType = ({
  categoryType = index.LCCategoryEnum.achievement
}) => {
  const categoryColor = credential_helpers.getCategoryColor(categoryType);
  return /* @__PURE__ */ React__default["default"].createElement(
    "span",
    {
      className: `uppercase font-poppins text-[12px] font-[600] leading-[12px] select-none text-${categoryColor}`
    },
    categoryType
  );
};

const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
  const skillsCount = credential_helpers.getTotalCountOfSkills(skills);
  if (skillsCount === 0) return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null);
  const skillsMap = credential_helpers.categorizeSkills(skills);
  const totalSkills = Object.values(skillsMap).reduce(
    (total2, category) => total2 + (category == null ? void 0 : category.length),
    0
  );
  const totalSubskills = Object.values(skillsMap).reduce(
    (total2, category) => total2 + ((category == null ? void 0 : category.totalSubskillsCount) || 0),
    0
  );
  const total = totalSkills + totalSubskills;
  const text = skillsCount === 1 ? "Skill" : "Skills";
  return /* @__PURE__ */ React__default["default"].createElement(
    "div",
    {
      className: "flex items-center justify-center mt-8 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom",
      onClick
    },
    /* @__PURE__ */ React__default["default"].createElement("div", { className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold" }, "+", total, " ", text, " ", /* @__PURE__ */ React__default["default"].createElement("div", { className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1" }, /* @__PURE__ */ React__default["default"].createElement(PuzzlePiece.PuzzlePiece, { className: "text-white", fill: "#fff" })))
  );
};

const VERIFIER_STATES = {
  selfVerified: "Self Issued",
  trustedVerifier: "Trusted Issuer",
  unknownVerifier: "Unknown Issuer",
  appIssuer: "Trusted App",
  untrustedVerifier: "Untrusted Issuer"
};
const VCIDDisplayFrontFace = ({
  isFront,
  setIsFront,
  showDetailsBtn,
  credential,
  knownDIDRegistry,
  customThumbComponent,
  hideQRCode = false,
  qrCodeOnClick,
  customIDDescription,
  unknownVerifierTitle
}) => {
  var _a;
  const { credentialSubject } = credential_helpers.getInfoFromCredential(credential, "MMM dd, yyyy", {
    uppercaseDate: false
  });
  const issuerDid = typeof credential.issuer === "string" ? credential.issuer : credential.issuer.id;
  const isAppIssuerDid = VerifierStateBadgeAndText.isAppDidWeb(issuerDid);
  let verifierState;
  if ((credentialSubject == null ? void 0 : credentialSubject.id) === issuerDid && issuerDid && issuerDid !== "did:example:123") {
    verifierState = VERIFIER_STATES.selfVerified;
  } else if (unknownVerifierTitle) {
    verifierState = VERIFIER_STATES.trustedVerifier;
  } else {
    if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "trusted") {
      verifierState = VERIFIER_STATES.trustedVerifier;
    } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "untrusted") {
      verifierState = VERIFIER_STATES.untrustedVerifier;
    } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "unknown") {
      verifierState = isAppIssuerDid ? VERIFIER_STATES.appIssuer : VERIFIER_STATES.unknownVerifier;
    } else {
      verifierState = isAppIssuerDid ? VERIFIER_STATES.appIssuer : VERIFIER_STATES.unknownVerifier;
    }
  }
  const isSelfVerified = verifierState === VERIFIER_STATES.selfVerified;
  const achievement = "achievement" in (credential == null ? void 0 : credential.credentialSubject) ? (_a = credential == null ? void 0 : credential.credentialSubject) == null ? void 0 : _a.achievement : void 0;
  const description = achievement == null ? void 0 : achievement.description;
  return /* @__PURE__ */ React__default["default"].createElement(h, { className: "w-full", flipKey: isFront }, /* @__PURE__ */ React__default["default"].createElement(v, { flipId: "face" }, /* @__PURE__ */ React__default["default"].createElement("section", { className: "vc-front-face w-full flex flex-col items-center gap-[15px]" }, /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "face" }, customThumbComponent), /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "face" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "text-white w-full flex items-center justify-center font-poppins" }, /* @__PURE__ */ React__default["default"].createElement(QRCodeIcon.IDIcon, { className: "text-white mr-1" }), " ID")), /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "face" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full relative" }, !hideQRCode && /* @__PURE__ */ React__default["default"].createElement(
    "button",
    {
      onClick: (e) => {
        e.stopPropagation();
        qrCodeOnClick == null ? void 0 : qrCodeOnClick();
      },
      className: "text-grayscale-900 bg-white rounded-full p-[10px] absolute top-[-10px] right-[45%]"
    },
    /* @__PURE__ */ React__default["default"].createElement(QRCodeIcon.QRCodeIcon, { className: "text-grayscale-900 " })
  ), /* @__PURE__ */ React__default["default"].createElement("img", { src: IDSleeve__default["default"], alt: "id-sleeve", className: "w-full object-cover" }))), /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "face" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full bg-white relative mt-[-70px] px-6 pb-4 pt-4" }, description && !customIDDescription && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
    TruncateTextBox,
    {
      text: description,
      className: "description-box",
      containerClassName: "!p-0 !shadow-none !text-center !w-full",
      textClassName: "!font-poppins !text-base !text-grayscale-700 !text-center !w-full",
      truncateThreshold: 204
    }
  )), customIDDescription && customIDDescription, isFront && showDetailsBtn && /* @__PURE__ */ React__default["default"].createElement(
    "button",
    {
      type: "button",
      className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[25px] w-fit select-none",
      onClick: () => setIsFront(!isFront)
    },
    "Details"
  ), /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full flex items-center justify-center mt-4" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "h-[2px] w-full bg-gray-200" })), /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full flex items-center justify-center mt-2" }, isSelfVerified && /* @__PURE__ */ React__default["default"].createElement("span", { className: "uppercase font-poppins text-base font-[500] text-green-dark flex gap-[3px] items-center" }, /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.PersonBadge, { className: "w-[20px] h-[20px]" }), "Self Issued"), verifierState === VERIFIER_STATES.trustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", { className: "uppercase font-poppins text-base font-[500] text-blue-light flex gap-[3px] items-center text-center" }, /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.VerifiedBadge, { className: "w-[20px] h-[20px]" }), unknownVerifierTitle != null ? unknownVerifierTitle : "Trusted Issuer"), verifierState === VERIFIER_STATES.unknownVerifier && /* @__PURE__ */ React__default["default"].createElement("span", { className: "uppercase font-poppins text-base font-[500] text-orange-500 flex gap-[3px] items-center" }, /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.UnknownVerifierBadge, { className: "w-[20px] h-[20px]" }), "Unknown Issuer"), verifierState === VERIFIER_STATES.appIssuer && /* @__PURE__ */ React__default["default"].createElement("span", { className: "uppercase font-poppins text-base font-[500] text-cyan-600 flex gap-[3px] items-center" }, /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.UnknownVerifierBadge, { className: "w-[20px] h-[20px]" }), "Trusted App"), verifierState === VERIFIER_STATES.untrustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", { className: "uppercase font-poppins text-base font-[500] text-red-mastercard flex gap-[3px] items-center" }, /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.RedFlag, { className: "w-[20px] h-[20px]" }), "Untrusted Issuer")))))));
};

const VCIDDisplayCard = ({
  credential,
  verificationItems,
  getFileMetadata,
  getVideoMetadata,
  onMediaAttachmentClick,
  customThumbComponent,
  customCriteria,
  customDescription,
  customIssueHistoryComponent,
  issueHistory,
  showBackButton = true,
  enableLightbox,
  knownDIDRegistry,
  customSkillsComponent,
  isFrontOverride,
  setIsFrontOverride,
  hideNavButtons,
  hideQRCode = false,
  qrCodeOnClick,
  showDetailsBtn = false,
  customIDDescription,
  hideGradientBackground = false,
  customLinkedCredentialsComponent,
  unknownVerifierTitle
}) => {
  const [_isFront, _setIsFront] = React.useState(isFrontOverride != null ? isFrontOverride : true);
  const isFront = isFrontOverride != null ? isFrontOverride : _isFront;
  const setIsFront = setIsFrontOverride != null ? setIsFrontOverride : _setIsFront;
  let backgroundStyle = {
    backgroundColor: `linear-gradient(180deg, rgba(24,34,78,1) ${!isFront && hideGradientBackground ? "100%" : "25%"}, rgba(139,145,167,1) 100%)`,
    backgroundImage: `linear-gradient(180deg, rgba(24,34,78,1) ${!isFront && hideGradientBackground ? "100%" : "25%"}, rgba(139,145,167,1) 100%)`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundAttachment: "fixed"
  };
  return /* @__PURE__ */ React__default["default"].createElement(h, { className: "w-full", flipKey: isFront }, /* @__PURE__ */ React__default["default"].createElement(v, { flipId: "card" }, /* @__PURE__ */ React__default["default"].createElement(
    "section",
    {
      className: `vc-display-card font-mouse flex flex-col items-center border-solid border-white rounded-[30px] z-10 max-w-[400px] relative bg-white shadow-3xl ${isFront ? "" : "min-h-[800px]"}`
    },
    /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        className: "relative vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] rounded-b-[30px] overflow-hidden",
        style: backgroundStyle,
        role: "button",
        onClick: () => setIsFront(!isFront)
      },
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-card-content-scroll-container w-full min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[30px]  scrollbar-hide pt-[20px]" }, isFront && /* @__PURE__ */ React__default["default"].createElement(
        VCIDDisplayFrontFace,
        {
          isFront: _isFront,
          setIsFront,
          showDetailsBtn,
          customThumbComponent,
          credential,
          knownDIDRegistry,
          qrCodeOnClick,
          hideQRCode,
          customIDDescription,
          unknownVerifierTitle
        }
      ), !isFront && /* @__PURE__ */ React__default["default"].createElement(
        VC2BackFace,
        {
          credential,
          verificationItems,
          issueHistory,
          getFileMetadata,
          getVideoMetadata,
          onMediaAttachmentClick,
          showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
          showFrontFace: () => setIsFront(true),
          customDescription,
          customCriteria,
          customIssueHistoryComponent,
          enableLightbox,
          customSkillsComponent,
          customLinkedCredentialsComponent
        }
      ))
    )
  )));
};

const VCDisplayCard2 = ({
  categoryType,
  credential,
  verificationItems,
  issueeOverride,
  issuerOverride,
  subjectDID,
  subjectImageComponent,
  issuerImageComponent,
  verificationInProgress = false,
  // convertTagsToSkills,
  handleXClick,
  getFileMetadata,
  getVideoMetadata,
  onMediaAttachmentClick,
  bottomRightIcon,
  customFooterComponent,
  customBodyCardComponent,
  customThumbComponent,
  customCriteria,
  customDescription,
  customIssueHistoryComponent,
  issueHistory,
  titleOverride,
  showBackButton = true,
  enableLightbox,
  customRibbonCategoryComponent,
  customFrontButton,
  knownDIDRegistry,
  hideIssueDate,
  onDotsClick,
  customSkillsComponent,
  isFrontOverride,
  setIsFrontOverride,
  hideNavButtons,
  hideQRCode = false,
  qrCodeOnClick,
  showDetailsBtn = false,
  customIDDescription,
  hideGradientBackground = false,
  formattedDisplayType,
  customLinkedCredentialsComponent,
  customContentSlot,
  customBodyContentSlot,
  unknownVerifierTitle,
  hideAwardedTo,
  hideFrontFaceDetails
}) => {
  var _a, _b, _c, _d, _e, _f, _g, _h;
  const {
    title = "",
    createdAt,
    issuer: _issuer = "",
    issuee: _issuee = "",
    imageUrl
  } = credential_helpers.getInfoFromCredential(credential, "MMM dd, yyyy");
  const issuee = issueeOverride || _issuee;
  const issuer = issuerOverride || _issuer;
  const [_isFront, _setIsFront] = React.useState(isFrontOverride != null ? isFrontOverride : true);
  const isFront = isFrontOverride != null ? isFrontOverride : _isFront;
  const setIsFront = setIsFrontOverride != null ? setIsFrontOverride : _setIsFront;
  const [headerHeight, setHeaderHeight] = React.useState(100);
  const [headerWidth, setHeaderWidth] = React.useState(0);
  const headerRef = React.useRef(null);
  React.useLayoutEffect(() => {
    setTimeout(() => {
      var _a2, _b2, _c2;
      setHeaderHeight(((_a2 = headerRef.current) == null ? void 0 : _a2.clientHeight) || 100);
      setHeaderWidth((_c2 = (_b2 = headerRef.current) == null ? void 0 : _b2.clientWidth) != null ? _c2 : 0);
    }, 10);
  });
  let worstVerificationStatus = verificationItems.reduce(
    (currentWorst, verification) => {
      switch (currentWorst) {
        case types_esm.VerificationStatusEnum.Success:
          return verification.status;
        case types_esm.VerificationStatusEnum.Error:
          return verification.status === types_esm.VerificationStatusEnum.Failed ? verification.status : currentWorst;
        case types_esm.VerificationStatusEnum.Failed:
          return currentWorst;
      }
    },
    types_esm.VerificationStatusEnum.Success
  );
  const statusColor = credential_helpers.getColorForVerificationStatus(worstVerificationStatus);
  const backgroundStyle = {
    backgroundColor: (_a = credential == null ? void 0 : credential.display) == null ? void 0 : _a.backgroundColor,
    backgroundImage: ((_b = credential == null ? void 0 : credential.display) == null ? void 0 : _b.backgroundImage) ? `linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25)), url(${(_c = credential.display) == null ? void 0 : _c.backgroundImage})` : void 0,
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundAttachment: "fixed"
  };
  const _title = titleOverride || title;
  if (categoryType === index.LCCategoryEnum.meritBadge || ((_d = credential == null ? void 0 : credential.display) == null ? void 0 : _d.displayType) === "award") {
    return /* @__PURE__ */ React__default["default"].createElement(
      MeritBadgeDisplayCard.MeritBadgeDisplayCard,
      {
        credential,
        categoryType,
        issueeOverride: issuee,
        issuerOverride: issuer,
        verificationItems,
        getFileMetadata,
        getVideoMetadata,
        onMediaAttachmentClick,
        enableLightbox,
        knownDIDRegistry,
        handleXClick,
        subjectImageComponent,
        issuerImageComponent,
        customBodyCardComponent,
        hideIssueDate,
        onDotsClick,
        isFrontOverride,
        setIsFrontOverride,
        hideNavButtons,
        showBackButton,
        showDetailsBtn,
        formattedDisplayType,
        customLinkedCredentialsComponent,
        customBodyContentSlot,
        unknownVerifierTitle,
        hideAwardedTo,
        hideFrontFaceDetails
      }
    );
  }
  if (((_e = credential == null ? void 0 : credential.display) == null ? void 0 : _e.displayType) === "certificate") {
    return /* @__PURE__ */ React__default["default"].createElement(
      CertificateDisplayCard.CertificateDisplayCard,
      {
        credential,
        categoryType,
        issueeOverride: issuee,
        issuerOverride: issuer,
        verificationItems,
        getFileMetadata,
        getVideoMetadata,
        onMediaAttachmentClick,
        enableLightbox,
        knownDIDRegistry,
        handleXClick,
        subjectImageComponent,
        issuerImageComponent,
        customBodyCardComponent,
        hideIssueDate,
        onDotsClick,
        isFrontOverride,
        setIsFrontOverride,
        hideNavButtons,
        showBackButton,
        showDetailsBtn,
        formattedDisplayType,
        customLinkedCredentialsComponent,
        customBodyContentSlot,
        unknownVerifierTitle,
        hideAwardedTo,
        hideFrontFaceDetails
      }
    );
  } else if (((_f = credential == null ? void 0 : credential.display) == null ? void 0 : _f.displayType) === "id" || categoryType === "ID") {
    return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(
      VCIDDisplayCard,
      {
        credential,
        verificationItems,
        getFileMetadata,
        getVideoMetadata,
        onMediaAttachmentClick,
        customThumbComponent,
        customCriteria,
        customDescription,
        customIssueHistoryComponent,
        issueHistory,
        enableLightbox,
        knownDIDRegistry,
        customSkillsComponent,
        isFrontOverride,
        setIsFrontOverride,
        hideNavButtons,
        hideQRCode,
        qrCodeOnClick,
        showBackButton,
        showDetailsBtn,
        customIDDescription,
        hideGradientBackground,
        customLinkedCredentialsComponent,
        unknownVerifierTitle
      }
    ));
  }
  const headerClassName = "vc-card-header px-[20px] pb-[10px] pt-[3px] overflow-visible mt-[40px] text-center bg-white border-y-[5px] border-[#EEF2FF] w-[calc(100%_+_16px)] rounded-t-[8px] z-50";
  const headerFitTextClassName = "vc-card-header-main-title text-[#18224E] pt-[3px] leading-[80%] text-[32px]";
  return /* @__PURE__ */ React__default["default"].createElement(h, { className: "w-full", flipKey: isFront }, /* @__PURE__ */ React__default["default"].createElement(v, { flipId: "card" }, /* @__PURE__ */ React__default["default"].createElement(
    "section",
    {
      className: "vc-display-card font-mouse flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] z-10 min-h-[800px] max-w-[400px] relative bg-white shadow-3xl",
      role: "button",
      onClick: () => setIsFront(!isFront)
    },
    /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React__default["default"].createElement(
      RibbonEnd,
      {
        side: "left",
        className: "absolute left-[-30px] top-[50px] z-0",
        height: "75"
      }
    )),
    /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React__default["default"].createElement(
      RibbonEnd,
      {
        side: "right",
        className: "absolute right-[-30px] top-[50px] z-0",
        height: "75"
      }
    )),
    /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React__default["default"].createElement(
      "h1",
      {
        ref: headerRef,
        className: `${headerClassName} absolute`,
        style: { wordBreak: "break-word" }
      },
      customRibbonCategoryComponent && customRibbonCategoryComponent,
      !customRibbonCategoryComponent && /* @__PURE__ */ React__default["default"].createElement(VCDisplayCardCategoryType, { categoryType }),
      /* @__PURE__ */ React__default["default"].createElement(
        FitText,
        {
          text: _title != null ? _title : "",
          maxFontSize: 32,
          minFontSize: 20,
          width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
          className: headerFitTextClassName
        }
      )
    )),
    isFront && handleXClick && /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React__default["default"].createElement(
      "button",
      {
        className: "vc-card-x-button absolute top-[-25px] bg-white rounded-full h-[50px] w-[50px] flex items-center justify-center z-50",
        onClick: handleXClick
      },
      /* @__PURE__ */ React__default["default"].createElement(RoundedX, null)
    )),
    /* @__PURE__ */ React__default["default"].createElement("div", { className: "relative vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] bg-[#353E64] rounded-b-[200px]" }, /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card", scale: true }, /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        className: "absolute top-0 left-0 w-full h-full rounded-b-[200px] rounded-t-[30px]",
        style: backgroundStyle
      }
    )), /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-card-content-scroll-container w-full pt-[20px] min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[200px] scrollbar-hide pb-[50px] z-50" }, /* @__PURE__ */ React__default["default"].createElement(
      "h1",
      {
        className: `${headerClassName} invisible`,
        style: { wordBreak: "break-word" }
      },
      customRibbonCategoryComponent && customRibbonCategoryComponent,
      !customRibbonCategoryComponent && /* @__PURE__ */ React__default["default"].createElement(VCDisplayCardCategoryType, { categoryType }),
      /* @__PURE__ */ React__default["default"].createElement(
        FitText,
        {
          text: _title != null ? _title : "",
          maxFontSize: 32,
          minFontSize: 20,
          width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
          className: headerFitTextClassName
        }
      )
    ), isFront && /* @__PURE__ */ React__default["default"].createElement(
      VC2FrontFaceInfo,
      {
        credential,
        issuee,
        subjectDID,
        issuer,
        title,
        subjectImageComponent,
        issuerImageComponent,
        customBodyCardComponent,
        customThumbComponent,
        createdAt: createdAt != null ? createdAt : "",
        imageUrl,
        knownDIDRegistry,
        customBodyContentSlot,
        unknownVerifierTitle
      }
    ), !isFront && /* @__PURE__ */ React__default["default"].createElement(
      VC2BackFace,
      {
        credential,
        verificationItems,
        issueHistory,
        getFileMetadata,
        getVideoMetadata,
        onMediaAttachmentClick,
        showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
        showFrontFace: () => setIsFront(true),
        customDescription,
        customCriteria,
        customIssueHistoryComponent,
        enableLightbox,
        customSkillsComponent,
        customLinkedCredentialsComponent
      }
    ), /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, isFront && /* @__PURE__ */ React__default["default"].createElement(
      VCDisplayCardSkillsCount,
      {
        skills: credential == null ? void 0 : credential.skills,
        onClick: () => setIsFront(!isFront)
      }
    )), (!hideNavButtons || showDetailsBtn) && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, isFront && customFrontButton, (isFront && !customFrontButton || isFront && showDetailsBtn) && /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React__default["default"].createElement(
      "button",
      {
        type: "button",
        className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[40px] w-fit select-none",
        onClick: () => setIsFront(!isFront)
      },
      "Details"
    )), !isFront && /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React__default["default"].createElement(
      "button",
      {
        type: "button",
        className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[40px] w-fit select-none",
        onClick: () => setIsFront(!isFront)
      },
      /* @__PURE__ */ React__default["default"].createElement("span", { className: "flex gap-[10px] items-center" }, /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText.LeftArrow, null), "Back")
    ))))),
    /* @__PURE__ */ React__default["default"].createElement("footer", { className: "vc-card-footer w-full flex justify-between p-[5px] mt-[5px]" }, /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, customFooterComponent && customFooterComponent), /* @__PURE__ */ React__default["default"].createElement(v, { inverseFlipId: "card" }, !customFooterComponent && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, worstVerificationStatus === types_esm.VerificationStatusEnum.Failed ? /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-[40px]", role: "presentation" }) : /* @__PURE__ */ React__default["default"].createElement(
      VCVerificationCheck.VCVerificationCheckWithSpinner,
      {
        spinnerSize: "40px",
        size: "32px",
        loading: verificationInProgress
      }
    ), /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-footer-text font-montserrat flex flex-col items-center justify-center text-[12px] font-[700] leading-[15px] select-none" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-[#4F4F4F]" }, "Verified Credential"), /* @__PURE__ */ React__default["default"].createElement(
      "span",
      {
        className: "vc-footer-status uppercase",
        style: { color: statusColor }
      },
      worstVerificationStatus
    )), /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        className: "vc-footer-icon rounded-[20px] h-[40px] w-[40px] flex items-center justify-center overflow-hidden",
        style: {
          backgroundColor: (_g = bottomRightIcon == null ? void 0 : bottomRightIcon.color) != null ? _g : "#6366F1"
        }
      },
      (_h = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _h : /* @__PURE__ */ React__default["default"].createElement(QRCodeIcon.AwardRibbon, null)
    ))))
  )));
};

exports.VCDisplayCard2 = VCDisplayCard2;
exports.VCDisplayCardSkillsCount = VCDisplayCardSkillsCount;
exports.VCIDDisplayCard = VCIDDisplayCard;
//# sourceMappingURL=VCDisplayCard2-d713808f.js.map
