import {
  languages
} from "./chunk-QHQWEERJ.js";
import {
  useDocumentDirection
} from "./chunk-Y7QKP6QU.js";
import {
  assetUrl
} from "./chunk-DTGEFKK4.js";

// src/components/layout/auth-layout/auth-language-select.tsx
import { GlobeEurope } from "@medusajs/icons";
import { DropdownMenu } from "@medusajs/ui";
import { useTranslation } from "react-i18next";
import { jsx, jsxs } from "react/jsx-runtime";
var AuthLanguageSelect = () => {
  const { t, i18n } = useTranslation();
  const direction = useDocumentDirection();
  const sortedLanguages = [...languages].sort(
    (a, b) => a.display_name.localeCompare(b.display_name)
  );
  const currentLanguage = sortedLanguages.find(
    (language) => language.code === i18n.language
  );
  return /* @__PURE__ */ jsxs(DropdownMenu, { dir: direction, children: [
    /* @__PURE__ */ jsxs(
      DropdownMenu.Trigger,
      {
        className: "text-ui-fg-subtle hover:bg-ui-bg-subtle-hover focus-visible:shadow-borders-focus flex items-center gap-x-2 rounded-md px-2 py-1 outline-none transition-fg",
        "data-testid": "auth-language-select-trigger",
        children: [
          /* @__PURE__ */ jsx(GlobeEurope, {}),
          /* @__PURE__ */ jsx("span", { className: "txt-compact-small", children: currentLanguage?.display_name ?? t("profile.fields.languageLabel") })
        ]
      }
    ),
    /* @__PURE__ */ jsx(
      DropdownMenu.Content,
      {
        align: "end",
        className: "max-h-[300px] overflow-y-auto",
        children: /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: i18n.language, children: sortedLanguages.map((language) => /* @__PURE__ */ jsx(
          DropdownMenu.RadioItem,
          {
            value: language.code,
            onClick: (e) => {
              e.preventDefault();
              i18n.changeLanguage(language.code);
            },
            "data-testid": `auth-language-select-option-${language.code}`,
            children: language.display_name
          },
          language.code
        )) })
      }
    )
  ] });
};

// src/components/layout/auth-layout/auth-layout.tsx
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var AuthLayout = ({ children }) => {
  return /* @__PURE__ */ jsxs2("div", { className: "flex h-dvh w-dvw overflow-hidden", children: [
    /* @__PURE__ */ jsxs2("div", { className: "bg-ui-bg-base border-ui-border-base flex h-full w-full flex-col overflow-y-auto border-r lg:w-[584px] lg:shrink-0", children: [
      /* @__PURE__ */ jsx2("div", { className: "flex justify-end px-8 pt-8 lg:px-14 lg:pt-12", children: /* @__PURE__ */ jsx2(AuthLanguageSelect, {}) }),
      /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col px-8 pb-8 lg:px-14 lg:pb-12", children })
    ] }),
    /* @__PURE__ */ jsx2("div", { className: "relative hidden flex-1 overflow-hidden lg:flex", children: /* @__PURE__ */ jsx2(
      "img",
      {
        src: assetUrl("/onboarding/illustration.svg"),
        alt: "",
        className: "h-full w-full object-cover"
      }
    ) })
  ] });
};

export {
  AuthLayout
};
