@seontechnologies/seon-id-verification/dist/SelectInput-D_egVIuA.mjs

An advanced SDK featuring web components for natural person identification through document scanning, facial recognition, hand gesture, and face turning detection, designed for secure and efficient user verification.

import { j as e } from "./index-oGnhSncZ.mjs";
import * as h from "react";
import { useState as c, useRef as N } from "react";
function u({ option: t, onClick: s }) {
  return e.jsxs("div", { onClick: () => s(t), className: "tw-w-full tw-flex tw-justify-start tw-items-center tw-gap-2 tw-min-h-10 tw-cursor-pointer", children: [(t == null ? void 0 : t.iconSrc) && e.jsx("img", { src: t.iconSrc, alt: t.text, className: "tw-w-6 tw-h-6" }), t == null ? void 0 : t.iconComponent, e.jsx("p", { className: "label tw-text-primary-on-light-100 dark:tw-text-primary-on-light-100-dark", children: t == null ? void 0 : t.text })] });
}
const S = (t) => /* @__PURE__ */ h.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ h.createElement("path", { d: "M7.46154 12.0385L1.24291 5.81984C0.919028 5.52834 0.919028 5.04251 1.24291 4.71862C1.53441 4.42713 2.02024 4.42713 2.34413 4.71862L8.01215 10.419L13.6802 4.75101C13.9717 4.42713 14.4575 4.42713 14.7814 4.75101C15.0729 5.04251 15.0729 5.52834 14.7814 5.81984L8.53036 12.0385C8.23887 12.3623 7.75304 12.3623 7.46154 12.0385Z", fill: "currentColor" })), p = ({ htmlFor: t, text: s }) => e.jsx("label", { className: "footnote-emphasized tw-text-accent dark:tw-text-accent-dark", htmlFor: t, children: s.toUpperCase() });
function z({ options: t = [], onChange: s, idPrefix: n, label: d, placeholder: o, disabled: x = !1, value: f = o, chevronPosition: i = "right" }) {
  const [r, g] = c(f), [L, v] = c(!1), [l, w] = c(!1), j = N(null), m = (a) => {
    g(a), v(!0), w(!1), s(a);
  }, C = () => {
    w(!l);
  }, b = (a) => {
    const k = t.find((y) => y.value === a.target.value) || o;
    m(k);
  };
  return e.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-2 tw-items-start tw-min-w-60", children: [d && e.jsx(p, { htmlFor: n + "country-select", text: d }), e.jsxs("div", { className: "tw-relative tw-w-full", children: [e.jsxs("div", { onClick: C, id: "header", className: `tw-w-full tw-flex ${i === "bottom" ? "tw-flex-col" : ""} tw-justify-between tw-items-center tw-gap-2 tw-h-12 tw-px-4 tw-border-[1px] tw-border-separator dark:tw-border-separator-dark tw-rounded-md tw-bg-web-secondary`, children: [e.jsx(u, { option: r, onClick: () => {
  } }), e.jsx(S, { className: `tw-w-4 tw-h-4 tw-text-tertiary-on-light-30 dark:tw-text-tertiary-on-light-30-dark ${i === "bottom" ? "tw-absolute tw-bottom-0" : ""}`, style: {
    transform: l ? "rotate(180deg)" : "rotate(0deg)",
    transition: "transform 300ms"
  } })] }), e.jsx("div", { className: `tw-mt-2 tw-absolute tw-w-full tw-overflow-y-auto tw-rounded-md tw-transition-all tw-duration-300 ${l ? "tw-max-h-60 tw-shadow-card-shadow " : "tw-max-h-0"} tw-z-10`, children: e.jsx("div", { className: "tw-w-full tw-flex tw-flex-col tw-items-start tw-px-5 tw-rounded-md tw-bg-web-secondary", children: t.map((a) => e.jsx(u, { option: a, onClick: m }, a.value)) }) })] }), e.jsx("select", { ref: j, id: n + "country-select", value: r == null ? void 0 : r.value, onChange: b, onFocus: () => w(!l), className: "tw-h-0 tw-w-0 tw-opacity-0 tw-absolute -tw-z-50", disabled: x, children: t.map((a) => e.jsx("option", { value: a.value, children: a.text }, a.value)) })] });
}
export {
  p as L,
  z as S
};