@adyen/kyc-components 3.81.0 → 3.82.0-beta.0

package/dist/Alert-QIcYF1qD.js

@@ -0,0 +1,231 @@
+;
+{
+  try {
+    let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "6bcaaeb8-af4a-446a-9b9c-121b0106e527", e._sentryDebugIdIdentifier = "sentry-dbid-6bcaaeb8-af4a-446a-9b9c-121b0106e527");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, jsx } from "preact/jsx-runtime";
+import cx from "classnames";
+import { isValidElement } from "preact";
+import { useState } from "preact/hooks";
+import { defineSlots } from "named-slots";
+import { V as Icon, x as Typography, v as Skeleton, a as useTranslation, B as Button } from "./StoreProvider-B_tFiIdr.js";
+const accordion = "adyen-kyc-accordion";
+const accordionSummary = "adyen-kyc-accordion-summary";
+const accordionBasic = "adyen-kyc-accordion-basic";
+const accordionInfo = "adyen-kyc-accordion-info";
+const accordionError = "adyen-kyc-accordion-error";
+const accordionWarning = "adyen-kyc-accordion-warning";
+const accordionSuccess = "adyen-kyc-accordion-success";
+const accordionNarrow = "adyen-kyc-accordion-narrow";
+const accordionContent = "adyen-kyc-accordion-content";
+const accordionWithIcon = "adyen-kyc-accordion-with-icon";
+const accordionArrow = "adyen-kyc-accordion-arrow";
+const accordionArrowRight = "adyen-kyc-accordion-arrow-right";
+const styles$1 = {
+  accordion,
+  accordionSummary,
+  accordionBasic,
+  accordionInfo,
+  accordionError,
+  accordionWarning,
+  accordionSuccess,
+  accordionNarrow,
+  accordionContent,
+  accordionWithIcon,
+  accordionArrow,
+  accordionArrowRight
+};
+const Accordion = ({
+  children,
+  expandOnLeft = false,
+  onToggle,
+  className,
+  variant = "basic",
+  narrow = false
+}) => {
+  const { Slot } = defineSlots(children, ["title", "content", "icon"]);
+  const handleToggle = (e) => {
+    if (!onToggle) return;
+    onToggle(e.newState === "closed" ? "close" : "open");
+  };
+  const variantMap2 = {
+    basic: styles$1.accordionBasic,
+    info: styles$1.accordionInfo,
+    error: styles$1.accordionError,
+    warning: styles$1.accordionWarning,
+    success: styles$1.accordionSuccess
+  };
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      onToggle: handleToggle,
+      className: cx(className, styles$1.accordion, variantMap2[variant], {
+        [styles$1.accordionWithIcon]: expandOnLeft,
+        [styles$1.accordionNarrow]: narrow
+      }),
+      children: [
+        /* @__PURE__ */ jsxs("summary", { className: styles$1.accordionSummary, children: [
+          expandOnLeft && /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: styles$1.accordionArrow }),
+          /* @__PURE__ */ jsx(Slot, { name: "icon" }),
+          /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "body-strongest", children: /* @__PURE__ */ jsx(Slot, { name: "title", children: /* @__PURE__ */ jsx(Skeleton, {}) }) }),
+          !expandOnLeft && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "chevron-down",
+              className: cx(styles$1.accordionArrow, styles$1.accordionArrowRight)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles$1.accordionContent, children: /* @__PURE__ */ jsx(Slot, { name: "content", children: /* @__PURE__ */ jsx(Skeleton, {}) }) })
+      ]
+    }
+  );
+};
+const alert = "adyen-kyc-alert";
+const alertWithoutIcon = "adyen-kyc-alert-without-icon";
+const alertExplanation = "adyen-kyc-alert-explanation";
+const alertActions = "adyen-kyc-alert-actions";
+const alertBasic = "adyen-kyc-alert-basic";
+const alertInfo = "adyen-kyc-alert-info";
+const alertError = "adyen-kyc-alert-error";
+const alertWarning = "adyen-kyc-alert-warning";
+const alertSuccess = "adyen-kyc-alert-success";
+const alertHeader = "adyen-kyc-alert-header";
+const alertIcon = "adyen-kyc-alert-icon";
+const alertIconInfo = "adyen-kyc-alert-icon-info";
+const alertIconError = "adyen-kyc-alert-icon-error";
+const alertIconWarning = "adyen-kyc-alert-icon-warning";
+const alertIconSuccess = "adyen-kyc-alert-icon-success";
+const alertTitle = "adyen-kyc-alert-title";
+const styles = {
+  alert,
+  alertWithoutIcon,
+  alertExplanation,
+  alertActions,
+  alertBasic,
+  alertInfo,
+  alertError,
+  alertWarning,
+  alertSuccess,
+  alertHeader,
+  alertIcon,
+  alertIconInfo,
+  alertIconError,
+  alertIconWarning,
+  alertIconSuccess,
+  alertTitle
+};
+const variantMap = {
+  basic: styles.alertBasic,
+  info: styles.alertInfo,
+  error: styles.alertError,
+  warning: styles.alertWarning,
+  success: styles.alertSuccess
+};
+const iconVariantMap = {
+  basic: "",
+  // does not exist
+  info: styles.alertIconInfo,
+  error: styles.alertIconError,
+  warning: styles.alertIconWarning,
+  success: styles.alertIconSuccess
+};
+const Alert = ({
+  title,
+  variant = "basic",
+  type = "default",
+  className,
+  actions,
+  children,
+  icon,
+  testId,
+  onClose,
+  onToggle
+}) => {
+  const { t } = useTranslation("common");
+  const [isClosed, setIsClosed] = useState(false);
+  if (isClosed) return null;
+  const closeAlert = () => {
+    if (onClose) onClose();
+    setIsClosed(true);
+  };
+  const renderIcon = () => {
+    if (icon === false) return void 0;
+    if (isValidElement(icon)) {
+      return icon;
+    }
+    return /* @__PURE__ */ jsx("span", { className: cx(styles.alertIcon, iconVariantMap[variant]), children: /* @__PURE__ */ jsx(AlertIcon, { variant }) });
+  };
+  const renderedIcon = renderIcon();
+  if (type === "collapsible") {
+    return /* @__PURE__ */ jsxs(Accordion, { variant, onToggle: onToggle || void 0, narrow: true, className, children: [
+      /* @__PURE__ */ jsx("template", { slot: "title", children: title }),
+      /* @__PURE__ */ jsx("template", { slot: "icon", children: renderedIcon }),
+      /* @__PURE__ */ jsxs("template", { slot: "content", children: [
+        children,
+        !!actions && /* @__PURE__ */ jsx("div", { className: styles.alertActions, children: actions })
+      ] })
+    ] });
+  }
+  if (type === "callToAction") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(styles.alert, className, variantMap[variant], {
+          [styles.alertWithoutIcon]: !renderedIcon
+        }),
+        role: "alert",
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.alertHeader, children: [
+            renderedIcon,
+            title && /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "body-strongest", className: styles.alertTitle, children: title }),
+            !!actions && /* @__PURE__ */ jsx("div", { className: styles.alertActions, children: actions })
+          ] }),
+          !!children && /* @__PURE__ */ jsx("div", { className: styles.alertExplanation, children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(styles.alert, className, variantMap[variant], {
+        [styles.alertWithoutIcon]: !renderedIcon
+      }),
+      role: "alert",
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.alertHeader, children: [
+          renderedIcon,
+          title && /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "body-strongest", className: styles.alertTitle, children: title }),
+          type === "dismissible" && /* @__PURE__ */ jsx(Button, { variant: "tertiary", icon: "cross", onClick: closeAlert, children: t(($) => $["close"]) })
+        ] }),
+        !!children && /* @__PURE__ */ jsx("div", { className: styles.alertExplanation, children }),
+        !!actions && /* @__PURE__ */ jsx("div", { className: styles.alertActions, children: actions })
+      ]
+    }
+  );
+};
+const AlertIcon = ({ variant }) => {
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ jsx(Icon, { name: "check" });
+    case "error":
+      return /* @__PURE__ */ jsx(Icon, { name: "field-error" });
+    case "warning":
+      return /* @__PURE__ */ jsx(Icon, { name: "warning" });
+    case "info":
+    case "basic":
+    default:
+      return /* @__PURE__ */ jsx(Icon, { name: "info-circle" });
+  }
+};
+export {
+  AlertIcon as A,
+  Alert as a
+};

package/dist/{Avatar-Cd_8eqbA.js → Avatar-DOeLDY6M.js}

@@ -2,14 +2,14 @@
 {
   try {
     let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
-    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "d91fd18a-44bf-4eaf-9641-144538eef53c", e._sentryDebugIdIdentifier = "sentry-dbid-d91fd18a-44bf-4eaf-9641-144538eef53c");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "319a4aab-1f2b-4119-88fb-f5766e4efc63", e._sentryDebugIdIdentifier = "sentry-dbid-319a4aab-1f2b-4119-88fb-f5766e4efc63");
   } catch (e) {
   }
 }
 ;
 import { jsx } from "preact/jsx-runtime";
 import cx from "classnames";
-import { a7 as Icon } from "./StoreProvider-pdSV8sgb.js";
+import { V as Icon } from "./StoreProvider-B_tFiIdr.js";
 const avatar = "adyen-kyc-avatar";
 const avatarLabel = "adyen-kyc-avatar-label";
 const avatarPrimary = "adyen-kyc-avatar-primary";