@frontify/fondue
Version:
Design system of Frontify
34 lines (33 loc) • 1.46 kB
JavaScript
import { jsxs as a, jsx as s } from "react/jsx-runtime";
import { Children as n } from "react";
var o = /* @__PURE__ */ ((l) => (l.Columns = "Columns", l.Spider = "Spider", l))(o || {});
const w = ({
layout: l,
spanLastItem: d,
children: c,
"data-test-id": r = "multi-input"
}) => {
const t = n.toArray(c);
return /* @__PURE__ */ a("div", { "data-test-id": r, className: "tw-flex tw-gap-2 tw-w-full tw-flex-col", children: [
l === "Columns" && /* @__PURE__ */ s("div", { "data-test-id": `${r}-grid-columns`, className: "tw-grid tw-grid-cols-2 tw-gap-2", children: t.map((e, i) => /* @__PURE__ */ s(
"div",
{
className: d && i === t.length - 1 ? "tw-col-span-2" : "",
children: e
},
i
)) }),
l === "Spider" && /* @__PURE__ */ a("div", { "data-test-id": `${r}-grid-spider`, className: "tw-grid tw-grid-cols-4 tw-gap-2", children: [
t[0] && /* @__PURE__ */ s("div", { className: "tw-col-start-2 tw-col-span-2", children: t[0] }),
t[1] && /* @__PURE__ */ s("div", { className: "tw-col-start-1 tw-col-span-2", children: t[1] }),
t[2] && /* @__PURE__ */ s("div", { className: "tw-col-start-3 tw-col-span-2", children: t[2] }),
t[3] && /* @__PURE__ */ s("div", { className: "tw-col-start-2 tw-col-span-2", children: t[3] })
] })
] });
};
w.displayName = "FondueMultiInput";
export {
w as MultiInput,
o as MultiInputLayout
};
//# sourceMappingURL=MultiInput.es.js.map