@payfit/unity-components
Version:
75 lines (74 loc) • 2.03 kB
JavaScript
import e from "../../hooks/use-id.js";
import { Badge as t } from "../badge/Badge.js";
import { BRAND_ASSETS as n } from "./PayFitBrand.js";
import { forwardRef as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
//#region src/components/payfit-brand/PayFitPreprod.tsx
var s = i({
slots: { base: "uy:h-auto" },
variants: {
showOnlyMonogram: {
true: { base: "uy:min-w-[32px]" },
false: { base: "uy:min-w-[104px]" }
},
theme: { default: {} }
},
compoundVariants: [{
showOnlyMonogram: !0,
theme: "default",
className: { base: "uy:min-w-[20px]" }
}, {
showOnlyMonogram: !1,
theme: "default",
className: { base: "uy:min-w-[48px]" }
}]
}), c = r(({ label: r, description: i, env: c, showOnlyMonogram: l = !1, ...u }, d) => {
let f = e(), p = `payfit-preprod-title-${f}`, m = `payfit-preprod-desc-${f}`, h = n.default;
return /* @__PURE__ */ o("span", {
className: "uy:flex uy:gap-200 uy:items-center",
children: [/* @__PURE__ */ o("svg", {
...u,
focusable: !1,
role: "img",
"aria-labelledby": p,
...i && { "aria-describedby": m },
xmlns: "http://www.w3.org/2000/svg",
viewBox: l ? h.monogram.viewBox : h.logotype.viewBox,
fill: "none",
ref: d,
width: l ? 24 : 80,
className: s({
showOnlyMonogram: l,
theme: "default"
}).base(),
children: [
/* @__PURE__ */ a("title", {
id: p,
children: r
}),
i && /* @__PURE__ */ a("desc", {
id: m,
children: i
}),
/* @__PURE__ */ a("path", {
fillRule: "evenodd",
className: l ? "uy:fill-grayscale-l12" : "uy:hidden",
d: h.monogram.path,
clipRule: "evenodd"
}),
!l && /* @__PURE__ */ a("path", {
className: "uy:fill-grayscale-l12",
d: h.logotype.path
})
]
}), /* @__PURE__ */ a(t, {
variant: "warning",
className: "uy:self-center",
children: c
})]
});
});
c.displayName = "PayFitBrandPreprod";
//#endregion
export { c as PayFitBrandPreprod };