@solostylist/ui-kit 2.0.1 → 2.0.2

package/dist/s-interactive-card/s-interactive-card.js

@@ -0,0 +1,152 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { t as n } from "../useForkRef-BuNFTXxE.js";
+import { t as r } from "../useEventCallback-DGCsaRIu.js";
+import { t as i } from "../appendOwnerState-CFQTq3pb.js";
+import { actionHoverMedia as a, getFocusVisibleStyle as o, reducedMotionMedia as s } from "../theme/components/action-styles.js";
+import { t as c } from "../mergeSlotProps-DC8r4QzS.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Box as f, Card as p, CardActionArea as m, keyframes as h, styled as g, useThemeProps as _ } from "@mui/material";
+//#region lib/s-interactive-card/s-interactive-card.tsx
+var v = "55%", y = "-18deg", b = "-140%", x = h`
+  from {
+    transform: translateX(${b}) skewX(${y});
+  }
+  to {
+    transform: translateX(${"260%"}) skewX(${y});
+  }
+`, S = (e) => ({ [a]: { "&:hover": e } }), C = (e) => ({
+	...S(e),
+	"&:has(.Mui-focusVisible)": e
+}), w = g(p, {
+	name: "SInteractiveCard",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: e.radius.md,
+	overflow: "hidden",
+	position: "relative",
+	transition: e.transitions.create(["border-color", "transform"], {
+		duration: e.transitions.duration.complex,
+		easing: e.transitions.easing.easeOut
+	}),
+	zIndex: 0,
+	[s]: { transition: "none" },
+	variants: [
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled,
+			style: C({ borderColor: (e.vars ?? e).palette.primary.main })
+		},
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled && !e.disableLift,
+			style: {
+				...S({ transform: `translateY(calc(${e.spacing(1.5)} * -1)) scale(1.02)` }),
+				[s]: S({ transform: "none" })
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled && e.sheen,
+			style: {
+				"&::after": {
+					backgroundImage: `linear-gradient(90deg, transparent, ${(e.vars ?? e).palette.whiteAlpha.light}, transparent)`,
+					content: "\"\"",
+					height: "100%",
+					insetBlockStart: 0,
+					insetInlineStart: 0,
+					pointerEvents: "none",
+					position: "absolute",
+					transform: `translateX(${b}) skewX(${y})`,
+					width: v,
+					willChange: "transform",
+					zIndex: 2
+				},
+				...S({ "&::after": { animation: `${x} ${e.transitions.duration.complex}ms ${e.transitions.easing.easeOut} forwards` } }),
+				[s]: { "&::after": { content: "none" } }
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.disabled,
+			style: {
+				borderColor: (e.vars ?? e).palette.divider,
+				boxShadow: "none"
+			}
+		}
+	]
+})), T = g(m, {
+	name: "SInteractiveCard",
+	slot: "ActionArea",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: "inherit",
+	display: "block",
+	height: "100%",
+	textAlign: "inherit",
+	width: "100%",
+	"&.Mui-focusVisible": {
+		...o(e),
+		outlineOffset: -2
+	}
+})), E = g(f, {
+	name: "SInteractiveCard",
+	slot: "Overlay",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	borderRadius: "inherit",
+	inset: 0,
+	overflow: "hidden",
+	pointerEvents: "none",
+	position: "absolute",
+	zIndex: 1
+}), D = l.forwardRef(function(a, o) {
+	let s = _({
+		props: a,
+		name: "SInteractiveCard"
+	}), { "aria-describedby": l, "aria-label": f, "aria-labelledby": p, children: m, disableLift: h = !1, disabled: g = !1, href: v, interactive: y = !0, onClick: b, overlay: x, sheen: S = !1, slotProps: C, slots: D, sx: O, ...k } = s, A = v !== void 0 || b !== void 0, j = {
+		...s,
+		clickable: A,
+		disableLift: h,
+		disabled: g,
+		interactive: y,
+		sheen: S
+	}, M = D?.root ?? w, N = D?.actionArea ?? T, P = D?.overlay ?? E, F = r((e) => {
+		if (g) {
+			e.preventDefault();
+			return;
+		}
+		b?.(e);
+	}), { ref: I, sx: L, ...R } = i(M, c(t(C?.root, j), {
+		...k,
+		"aria-describedby": A ? void 0 : l,
+		"aria-label": A ? void 0 : f,
+		"aria-labelledby": A ? void 0 : p
+	}), j), z = n(I, o), B = c(t(C?.actionArea, j), {
+		"aria-describedby": l,
+		"aria-label": f,
+		"aria-labelledby": p,
+		onClick: F
+	}), V = i(N, {
+		...B,
+		component: v === void 0 ? "button" : "a",
+		disabled: g || B.disabled,
+		href: v,
+		nativeButton: v === void 0,
+		type: v === void 0 ? "button" : void 0
+	}, j), H = i(P, t(C?.overlay, j) ?? {}, j);
+	return /* @__PURE__ */ d(M, {
+		...R,
+		ref: z,
+		sx: [...e(L), ...e(O)],
+		children: [A ? /* @__PURE__ */ u(N, {
+			...V,
+			children: m
+		}) : m, x == null ? null : /* @__PURE__ */ u(P, {
+			...H,
+			"aria-hidden": !0,
+			children: x
+		})]
+	});
+});
+D.displayName = "SInteractiveCard";
+//#endregion
+export { D as SInteractiveCard, D as default };

package/dist/s-label/s-label.js

@@ -1,61 +1,62 @@
-import { toSxArray as e } from "../utils/sx.js";
-import { styled as t, useThemeProps as n } from "@mui/material/styles";
-import r from "@mui/material/IconButton";
-import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@mui/material/Typography";
-import c from "@mui/utils/appendOwnerState";
-import l from "@mui/material/Tooltip";
-import u from "@mui/icons-material/InfoOutlined";
-import d from "@mui/material/Stack";
+import { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../Stack-C0LGzM4c.js";
+import { t as n } from "../useThemeProps-Dw9dmKyT.js";
+import { t as r } from "../IconButton-CE-4GamO.js";
+import { toSxArray as i } from "../utils/sx.js";
+import { t as a } from "../appendOwnerState-CFQTq3pb.js";
+import { t as o } from "../Typography-_P0svrkO.js";
+import { t as s } from "../InfoOutlined-lpvhO6P8.js";
+import { t as c } from "../Tooltip-B1sn94L0.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region lib/s-label/s-label.tsx
-var f = t(d, {
+var f = e(t, {
 	name: "SLabel",
 	slot: "Root"
 })({});
 function p(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var m = (e, t) => !t && !(i.isValidElement(e) && e.type === s), h = i.forwardRef(function(t, i) {
+var m = (e, t) => !t && !(l.isValidElement(e) && e.type === o), h = l.forwardRef(function(e, l) {
 	let h = n({
-		props: t,
+		props: e,
 		name: "SLabel"
 	}), { children: g, disableLabelTypography: _ = !1, disableValueTypography: v = !1, hint: y, label: b, slotProps: x, slots: S, sx: C, ...w } = h, T = typeof y == "string" ? y.trim().length > 0 : !!y, E = {
 		...h,
 		disableLabelTypography: _,
 		disableValueTypography: v,
 		hasHint: T
-	}, D = S?.labelRow ?? d, O = S?.label ?? s, k = S?.value ?? s, A = S?.tooltip ?? l, j = S?.hintButton ?? r, M = c(S?.labelRow, p(x?.labelRow, E) ?? {}, E), N = c(S?.label, p(x?.label, E) ?? {}, E), P = c(S?.value, p(x?.value, E) ?? {}, E), F = c(S?.tooltip, p(x?.tooltip, E) ?? {}, E), I = c(S?.hintButton, p(x?.hintButton, E) ?? {}, E), L = m(b, _), R = m(g, v);
-	return /* @__PURE__ */ o(f, {
+	}, D = S?.labelRow ?? t, O = S?.label ?? o, k = S?.value ?? o, A = S?.tooltip ?? c, j = S?.hintButton ?? r, M = a(S?.labelRow, p(x?.labelRow, E) ?? {}, E), N = a(S?.label, p(x?.label, E) ?? {}, E), P = a(S?.value, p(x?.value, E) ?? {}, E), F = a(S?.tooltip, p(x?.tooltip, E) ?? {}, E), I = a(S?.hintButton, p(x?.hintButton, E) ?? {}, E), L = m(b, _), R = m(g, v);
+	return /* @__PURE__ */ d(f, {
 		...w,
-		ref: i,
+		ref: l,
 		ownerState: E,
-		sx: [{ width: "100%" }, ...e(C)],
-		children: [/* @__PURE__ */ o(D, {
+		sx: [{ width: "100%" }, ...i(C)],
+		children: [/* @__PURE__ */ d(D, {
 			direction: "row",
 			...M,
-			sx: [{ alignItems: "center" }, ...e(M?.sx)],
-			children: [L ? /* @__PURE__ */ a(O, {
+			sx: [{ alignItems: "center" }, ...i(M?.sx)],
+			children: [L ? /* @__PURE__ */ u(O, {
 				component: "span",
 				color: "text.secondary",
 				...N,
 				children: b
-			}) : b, E.hasHint ? /* @__PURE__ */ a(A, {
+			}) : b, E.hasHint ? /* @__PURE__ */ u(A, {
 				title: y,
 				placement: "top",
 				...F,
-				children: /* @__PURE__ */ a(j, {
+				children: /* @__PURE__ */ u(j, {
 					"aria-label": typeof y == "string" ? y : "More information",
 					size: "small",
 					...I,
 					sx: [{
 						ml: 1,
 						p: 0
-					}, ...e(I?.sx)],
-					children: /* @__PURE__ */ a(u, { fontSize: "inherit" })
+					}, ...i(I?.sx)],
+					children: /* @__PURE__ */ u(s, { fontSize: "inherit" })
 				})
 			}) : null]
-		}), R ? /* @__PURE__ */ a(k, {
+		}), R ? /* @__PURE__ */ u(k, {
 			component: "div",
 			...P,
 			children: g

package/dist/s-language-switcher/index.js

@@ -1,2 +1,2 @@
-import { SLanguagePopover as e, SLanguageSwitcher as t, defaultLanguageOptions as n } from "./s-language-switcher.js";
-export { e as SLanguagePopover, t as SLanguageSwitcher, t as default, n as defaultLanguageOptions };
+import { n as e, r as t, t as n } from "../s-language-switcher-PaMgHWc2.js";
+export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/s-language-switcher/s-language-switcher.js

@@ -1,150 +1,2 @@
-import { SIconButton as e } from "../s-icon-button/s-icon-button.js";
-import { styled as t, useThemeProps as n } from "@mui/material/styles";
-import r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "@mui/material/Typography";
-import { mergeSlotProps as s } from "@mui/material/utils";
-import c from "@mui/material/ListItemIcon";
-import l from "@mui/material/Menu";
-import u from "@mui/material/MenuItem";
-import d from "react-country-flag";
-import { useTranslation as f } from "react-i18next";
-//#region lib/s-language-switcher/s-language-switcher.tsx
-var p = 16, m = 20, h = [{
-	code: "en",
-	label: "English",
-	countryCode: "GB"
-}, {
-	code: "vi",
-	label: "Vietnamese",
-	countryCode: "VN"
-}], g = t(l, {
-	name: "SLanguagePopover",
-	slot: "Root"
-})({}), _ = r.forwardRef(function(e, t) {
-	let r = n({
-		props: e,
-		name: "SLanguagePopover"
-	}), { anchorOrigin: l = {
-		horizontal: "right",
-		vertical: "bottom"
-	}, currentLanguage: f, languages: p = h, menuId: _, menuLabelledBy: v, menuWidth: y = "220px", onLanguageChange: b, slotProps: x, transformOrigin: S = {
-		horizontal: "right",
-		vertical: "top"
-	}, variant: C = "selectedMenu", ...w } = r, T = {
-		...r,
-		anchorOrigin: l,
-		currentLanguage: f,
-		languages: p,
-		menuId: _,
-		menuLabelledBy: v,
-		menuWidth: y,
-		onLanguageChange: b,
-		open: w.open,
-		slotProps: x,
-		transformOrigin: S,
-		variant: C
-	};
-	return /* @__PURE__ */ i(g, {
-		...w,
-		ref: t,
-		anchorOrigin: l,
-		ownerState: T,
-		slotProps: {
-			...x,
-			paper: s(x?.paper, { sx: { minWidth: y } }),
-			list: s(x?.list, {
-				id: _,
-				"aria-labelledby": v
-			})
-		},
-		transformOrigin: S,
-		variant: C,
-		children: p.map((e) => /* @__PURE__ */ a(u, {
-			onClick: (t) => {
-				b?.(t, e.code);
-			},
-			selected: f === e.code,
-			children: [/* @__PURE__ */ i(c, { children: /* @__PURE__ */ i(d, {
-				alt: "",
-				"aria-hidden": "true",
-				countryCode: e.countryCode,
-				svg: !0,
-				style: {
-					width: m,
-					height: m
-				}
-			}) }), /* @__PURE__ */ i(o, {
-				variant: "subtitle2",
-				children: e.label
-			})]
-		}, e.code))
-	});
-});
-_.displayName = "SLanguagePopover";
-var v = t(e, {
-	name: "SLanguageSwitcher",
-	slot: "Root"
-})({}), y = r.forwardRef(function(e, t) {
-	let o = n({
-		props: e,
-		name: "SLanguageSwitcher"
-	}), { "aria-label": s, languages: c = h, onLanguageChange: l, currentLanguage: u, tooltip: m, buttonFlagSize: g = p, menuWidth: y = "220px", onClick: b, useI18n: x = !0, ...S } = o, C = f(), w = x ? C.t : null, T = x ? C.i18n : null, [E, D] = r.useState(null), O = r.useId(), k = r.useId(), A = S.id ?? O, j = !!E, M = u ?? T?.language ?? c[0]?.code ?? "en", N = c.find((e) => e.code === M) || c[0], P = r.useCallback((e) => {
-		b?.(e), e.defaultPrevented || D(e.currentTarget);
-	}, [b]), F = r.useCallback(() => {
-		D(null);
-	}, []), I = r.useCallback((e, t) => {
-		l ? l(e, t) : T && T.changeLanguage(t), e.defaultPrevented || F();
-	}, [
-		F,
-		T,
-		l
-	]), L = m ?? (w ? w("header:language.tooltip") : "Change language"), R = {
-		...o,
-		"aria-label": s ?? (typeof L == "string" ? L : "Change language"),
-		buttonFlagSize: g,
-		currentLanguage: M,
-		languages: c,
-		menuWidth: y,
-		onClick: b,
-		onLanguageChange: l,
-		open: j,
-		tooltip: L,
-		useI18n: x
-	};
-	return /* @__PURE__ */ a(r.Fragment, { children: [/* @__PURE__ */ i(v, {
-		...S,
-		ref: t,
-		id: A,
-		"aria-controls": j ? k : void 0,
-		"aria-expanded": j || void 0,
-		"aria-haspopup": "menu",
-		"aria-label": s ?? (typeof L == "string" ? L : "Change language"),
-		onClick: P,
-		ownerState: R,
-		tooltip: L,
-		children: /* @__PURE__ */ i(d, {
-			alt: "",
-			"aria-hidden": "true",
-			countryCode: N?.countryCode || "US",
-			svg: !0,
-			style: {
-				width: g,
-				height: g
-			}
-		})
-	}), /* @__PURE__ */ i(_, {
-		anchorEl: E,
-		menuId: k,
-		menuLabelledBy: A,
-		onClose: F,
-		open: j,
-		onLanguageChange: I,
-		languages: c,
-		currentLanguage: M,
-		menuWidth: y
-	})] });
-});
-y.displayName = "SLanguageSwitcher";
-//#endregion
-export { _ as SLanguagePopover, y as SLanguageSwitcher, y as default, h as defaultLanguageOptions };
+import { n as e, r as t, t as n } from "../s-language-switcher-PaMgHWc2.js";
+export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/s-language-switcher-PaMgHWc2.js

@@ -0,0 +1,246 @@
+import { n as e } from "./chunk-C_CI6nMA.js";
+import { t } from "./prop-types-BzYPyWN7.js";
+import { r as n, t as r } from "./DefaultPropsProvider-ebWx4_5E.js";
+import { t as i } from "./clsx-DGZSe4Nt.js";
+import { t as a } from "./styled-Bog8QCl3.js";
+import { t as o } from "./useThemeProps-Dw9dmKyT.js";
+import { t as s } from "./memoTheme-qFyKAk7y.js";
+import { t as c } from "./mergeSlotProps-DC8r4QzS.js";
+import { n as l } from "./List-RNcZhRdr.js";
+import { t as u } from "./Menu-CnyB4SDS.js";
+import { t as d } from "./Typography-_P0svrkO.js";
+import { SIconButton as f } from "./s-icon-button/s-icon-button.js";
+import { placementOrigins as p } from "./s-popover/placement.js";
+import { r as m, t as h } from "./MenuItem-Ck30dBOR.js";
+import * as g from "react";
+import _, { createElement as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useTranslation as x } from "react-i18next";
+//#region ../../node_modules/@mui/material/ListItemIcon/ListItemIcon.mjs
+var S = /* @__PURE__ */ e(t(), 1), C = (e) => {
+	let { alignItems: t, classes: r } = e;
+	return n({ root: ["root", t === "flex-start" && "alignItemsFlexStart"] }, m, r);
+}, w = a("div", {
+	name: "MuiListItemIcon",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [t.root, n.alignItems === "flex-start" && t.alignItemsFlexStart];
+	}
+})(s(({ theme: e }) => ({
+	minWidth: e.spacing(4.5),
+	color: (e.vars || e).palette.action.active,
+	flexShrink: 0,
+	display: "inline-flex",
+	variants: [{
+		props: { alignItems: "flex-start" },
+		style: { marginTop: 8 }
+	}]
+}))), T = /* @__PURE__ */ g.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiListItemIcon"
+	}), { className: a, ...o } = n, s = g.useContext(l), c = {
+		...n,
+		alignItems: s.alignItems
+	};
+	return /* @__PURE__ */ y(w, {
+		className: i(C(c).root, a),
+		ownerState: c,
+		ref: t,
+		...o
+	});
+});
+process.env.NODE_ENV !== "production" && (T.propTypes = {
+	children: S.default.node,
+	classes: S.default.object,
+	className: S.default.string,
+	sx: S.default.oneOfType([
+		S.default.arrayOf(S.default.oneOfType([
+			S.default.func,
+			S.default.object,
+			S.default.bool
+		])),
+		S.default.func,
+		S.default.object
+	])
+});
+//#endregion
+//#region ../../node_modules/react-country-flag/dist/react-country-flag.esm.js
+function E() {
+	return E = Object.assign ? Object.assign.bind() : function(e) {
+		for (var t = 1; t < arguments.length; t++) {
+			var n = arguments[t];
+			for (var r in n) Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
+		}
+		return e;
+	}, E.apply(this, arguments);
+}
+function D(e, t) {
+	if (e == null) return {};
+	var n = {}, r = Object.keys(e), i, a;
+	for (a = 0; a < r.length; a++) i = r[a], !(t.indexOf(i) >= 0) && (n[i] = e[i]);
+	return n;
+}
+var O = [
+	"cdnSuffix",
+	"cdnUrl",
+	"countryCode",
+	"style",
+	"svg"
+], k = "https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/", A = "svg", j = 127397, M = function(e) {
+	var t = e.cdnSuffix, n = t === void 0 ? A : t, r = e.cdnUrl, i = r === void 0 ? k : r, a = e.countryCode, o = e.style, s = e.svg, c = s === void 0 ? !1 : s, l = D(e, O);
+	if (typeof a != "string") return null;
+	if (c) {
+		var u = "" + i + a.toLowerCase() + "." + n;
+		return v("img", Object.assign({}, l, {
+			src: u,
+			style: E({
+				display: "inline-block",
+				width: "1em",
+				height: "1em",
+				verticalAlign: "middle"
+			}, o)
+		}));
+	}
+	var d = a.toUpperCase().replace(/./g, function(e) {
+		return String.fromCodePoint(e.charCodeAt(0) + j);
+	});
+	return v("span", Object.assign({ role: "img" }, l, { style: E({
+		display: "inline-block",
+		fontSize: "1em",
+		lineHeight: "1em",
+		verticalAlign: "middle"
+	}, o) }), d);
+}, N = 16, P = 20, F = [{
+	code: "en",
+	label: "English",
+	countryCode: "GB"
+}, {
+	code: "vi",
+	label: "Vietnamese",
+	countryCode: "VN"
+}], I = a(u, {
+	name: "SLanguagePopover",
+	slot: "Root"
+})({}), L = _.forwardRef(function(e, t) {
+	let n = o({
+		props: e,
+		name: "SLanguagePopover"
+	}), { anchorOrigin: r = p["bottom-end"].anchorOrigin, currentLanguage: i, languages: a = F, menuId: s, menuLabelledBy: l, menuWidth: u = "220px", onLanguageChange: f, slotProps: m, transformOrigin: g = p["bottom-end"].transformOrigin, variant: _ = "selectedMenu", ...v } = n, x = {
+		...n,
+		anchorOrigin: r,
+		currentLanguage: i,
+		languages: a,
+		menuId: s,
+		menuLabelledBy: l,
+		menuWidth: u,
+		onLanguageChange: f,
+		open: v.open,
+		slotProps: m,
+		transformOrigin: g,
+		variant: _
+	};
+	return /* @__PURE__ */ y(I, {
+		...v,
+		ref: t,
+		anchorOrigin: r,
+		ownerState: x,
+		slotProps: {
+			...m,
+			paper: c(m?.paper, { sx: { minWidth: u } }),
+			list: c(m?.list, {
+				id: s,
+				"aria-labelledby": l
+			})
+		},
+		transformOrigin: g,
+		variant: _,
+		children: a.map((e) => /* @__PURE__ */ b(h, {
+			onClick: (t) => {
+				f?.(t, e.code);
+			},
+			selected: i === e.code,
+			children: [/* @__PURE__ */ y(T, { children: /* @__PURE__ */ y(M, {
+				alt: "",
+				"aria-hidden": "true",
+				countryCode: e.countryCode,
+				svg: !0,
+				style: {
+					width: P,
+					height: P
+				}
+			}) }), /* @__PURE__ */ y(d, {
+				variant: "subtitle2",
+				children: e.label
+			})]
+		}, e.code))
+	});
+});
+L.displayName = "SLanguagePopover";
+var R = a(f, {
+	name: "SLanguageSwitcher",
+	slot: "Root"
+})({}), z = _.forwardRef(function(e, t) {
+	let n = o({
+		props: e,
+		name: "SLanguageSwitcher"
+	}), { "aria-label": r, languages: i = F, onLanguageChange: a, currentLanguage: s, tooltip: c, buttonFlagSize: l = N, menuWidth: u = "220px", onClick: d, useI18n: f = !0, ...p } = n, m = x(), h = f ? m.t : null, g = f ? m.i18n : null, [v, S] = _.useState(null), C = _.useId(), w = _.useId(), T = p.id ?? C, E = !!v, D = s ?? g?.language ?? i[0]?.code ?? "en", O = i.find((e) => e.code === D) || i[0], k = _.useCallback((e) => {
+		d?.(e), e.defaultPrevented || S(e.currentTarget);
+	}, [d]), A = _.useCallback(() => {
+		S(null);
+	}, []), j = _.useCallback((e, t) => {
+		a ? a(e, t) : g && g.changeLanguage(t), e.defaultPrevented || A();
+	}, [
+		A,
+		g,
+		a
+	]), P = c ?? (h ? h("header:language.tooltip") : "Change language"), I = {
+		...n,
+		"aria-label": r ?? (typeof P == "string" ? P : "Change language"),
+		buttonFlagSize: l,
+		currentLanguage: D,
+		languages: i,
+		menuWidth: u,
+		onClick: d,
+		onLanguageChange: a,
+		open: E,
+		tooltip: P,
+		useI18n: f
+	};
+	return /* @__PURE__ */ b(_.Fragment, { children: [/* @__PURE__ */ y(R, {
+		...p,
+		ref: t,
+		id: T,
+		"aria-controls": E ? w : void 0,
+		"aria-expanded": E || void 0,
+		"aria-haspopup": "menu",
+		"aria-label": r ?? (typeof P == "string" ? P : "Change language"),
+		onClick: k,
+		ownerState: I,
+		tooltip: P,
+		children: /* @__PURE__ */ y(M, {
+			alt: "",
+			"aria-hidden": "true",
+			countryCode: O?.countryCode || "US",
+			svg: !0,
+			style: {
+				width: l,
+				height: l
+			}
+		})
+	}), /* @__PURE__ */ y(L, {
+		anchorEl: v,
+		menuId: w,
+		menuLabelledBy: T,
+		onClose: A,
+		open: E,
+		onLanguageChange: j,
+		languages: i,
+		currentLanguage: D,
+		menuWidth: u
+	})] });
+});
+z.displayName = "SLanguageSwitcher";
+//#endregion
+export { z as n, F as r, L as t };