UNPKG

strapi-plugin-navigation

Version:
1,647 lines (1,639 loc) 147 kB
import Ln, { useRef as lt, useEffect as te, useState as B, useCallback as G, useMemo as ge } from "react"; import { jsx as t, jsxs as h, Fragment as $e } from "react/jsx-runtime"; import qe, { useTheme as xn } from "styled-components"; import { getFetchClient as ne, Form as bt, useNotification as ut, Layouts as Ye, useStrapiApp as En, useRBAC as Pn, Page as _e, useAuth as kn } from "@strapi/strapi/admin"; import { useDrop as Mn, useDrag as Dn, DndProvider as qn } from "react-dnd"; import { HTML5Backend as jn } from "react-dnd-html5-backend"; import { Routes as Bn, Route as Vt } from "react-router-dom"; import { Dialog as at, Flex as W, Typography as q, Button as oe, Modal as se, Grid as I, TextInput as We, Toggle as De, Box as ee, Table as ln, Thead as sn, Tr as ht, Th as Se, Checkbox as _t, IconButton as Be, Tbody as dn, Td as Fe, Loader as At, Tag as On, Field as Vn, SingleSelect as He, SingleSelectOption as Qe, Badge as _n, CardTitle as zn, IconButtonGroup as cn, Card as Kn, CardBody as zt, Divider as gt, TextButton as Un, Link as Wn, MultiSelect as Ge, MultiSelectOption as Ze, Combobox as Hn, ComboboxOption as Qn, Searchbar as Xn, DesignSystemProvider as un, Alert as Gn, VisuallyHidden as Zn, Tooltip as Jn, TFooter as Yn, Accordion as it, NumberInput as ea } from "@strapi/design-system"; import { useQuery as Ke, useMutation as je, useQueryClient as tt, QueryClient as pn, QueryClientProvider as mn } from "@tanstack/react-query"; import { once as ta, orderBy as na, capitalize as gn, get as me, isEmpty as ye, first as St, isObject as st, isNil as Xe, isString as It, set as vt, sortBy as dt, isNumber as Kt, isNull as aa, isBoolean as ia, isArray as oa, pick as ra, isNaN as la } from "lodash"; import { useIntl as H } from "react-intl"; import { Field as X, usePluginTheme as hn, prefixPluginTranslations as Ut, flattenObject as Wt } from "@sensinum/strapi-utils"; import { Check as ct, WarningCircle as sa, Feather as da, Pencil as Ft, Trash as $t, Information as ca, CaretDown as ua, CaretUp as pa, Drag as ma, Eye as fn, ArrowClockwise as ga, Earth as ha, Cog as fa, Link as ya, Plus as Lt, ArrowRight as ba, Search as Ia, ListPlus as va, Minus as Ca, EyeStriked as Ta, PriceTag as wa, Play as Na, Typhoon as Aa } from "@strapi/icons"; import * as i from "zod"; import { z as d } from "zod"; import { prop as ft } from "lodash/fp"; const Re = "navigation", Ra = ({ setPlugin: e }) => { const n = lt(e); return te(() => { n.current?.(Re); }, []), null; }, Sa = 92, Fa = qe.svg` path { fill: ${({ theme: e }) => e.colors.neutral500}; } `, $a = ({ width: e = 20, height: n = 20 }) => /* @__PURE__ */ t( Fa, { viewBox: `0 0 ${e} ${n}`, xmlns: "http://www.w3.org/2000/svg", height: n, width: e, children: /* @__PURE__ */ t("g", { style: { transform: `scale(${e / Sa})` }, children: /* @__PURE__ */ t( "path", { d: `M78,23.5H14c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5h64c3.6,0,6.5,2.9,6.5,6.5S81.6,23.5,78,23.5z M84.5,46 c0-3.6-2.9-6.5-6.5-6.5H14c-3.6,0-6.5,2.9-6.5,6.5s2.9,6.5,6.5,6.5h64C81.6,52.5,84.5,49.6,84.5,46z M84.5,75c0-3.6-2.9-6.5-6.5-6.5 H14c-3.6,0-6.5,2.9-6.5,6.5s2.9,6.5,6.5,6.5h64C81.6,81.5,84.5,78.6,84.5,75z` } ) }) } ), La = () => /* @__PURE__ */ t($a, {}), Ht = { en: () => import("../_chunks/en--XL9UqS_.mjs"), fr: () => import("../_chunks/fr-DDKFueED.mjs"), ca: () => import("../_chunks/ca-DVB9tv4s.mjs") }, Rt = (e) => `${Re}.${e}`, l = (e, n) => ({ id: Rt(e), defaultMessage: n ?? Rt(e) }), Ct = (e) => `plugin::navigation.${e}`, Tt = { read: "read", update: "update", settings: "settings" }, Ue = { access: [{ action: Ct(Tt.read), subject: null }], update: [{ action: Ct(Tt.update), subject: null }], settings: [{ action: Ct(Tt.settings), subject: null }] }, xt = d.object({ // TODO: Proper message translation name: d.string().refine((e) => !e.includes(" "), { message: "No space allowed" }), label: d.string(), required: d.boolean().optional(), enabled: d.boolean().optional() }), xa = xt.extend({ type: d.literal("select"), multi: d.boolean(), options: d.array(d.string()) }), Ea = xt.extend({ type: d.enum(["boolean", "string"]), multi: d.literal(!1).optional(), options: d.array(d.string()).max(0).optional() }), Pa = xt.extend({ type: d.literal("media"), multi: d.literal(!1).optional(), options: d.array(d.string()).max(0).optional() }), yn = d.union([ Ea, Pa, xa ]), ka = d.union([ d.literal("audience"), yn ]), Ma = d.object({ additionalFields: d.array(ka), allowedLevels: d.number(), availableAudience: d.object({ id: d.number(), documentId: d.string(), name: d.string(), key: d.string() }).array(), contentTypes: d.array(d.string()), contentTypesNameFields: d.record(d.string(), d.array(d.string())), contentTypesPopulate: d.record(d.string(), d.array(d.string())), gql: d.object({ navigationItemRelated: d.array(d.string()) }), pathDefaultFields: d.record(d.string(), d.any()), cascadeMenuAttached: d.boolean(), preferCustomContentTypes: d.boolean(), isCacheEnabled: d.boolean().optional(), isCachePluginEnabled: d.boolean().optional() }), Da = d.object({ uid: d.string(), isDisplayed: d.boolean(), apiID: d.string(), kind: d.enum(["collectionType", "singleType"]), info: d.object({ singularName: d.string(), pluralName: d.string(), displayName: d.string(), description: d.string().optional() }), attributes: d.record(d.string(), d.unknown()) }), qa = i.object({ id: i.number(), documentId: i.string(), name: i.string(), key: i.string() }), bn = i.enum(["INTERNAL", "EXTERNAL", "WRAPPER"]), ja = i.object({ id: i.number(), documentId: i.string(), title: i.string(), type: bn, path: i.string(), externalPath: i.string().or(i.null()).optional(), uiRouterKey: i.string(), menuAttached: i.boolean(), order: i.number().int(), collapsed: i.boolean(), autoSync: i.boolean().or(i.null()).optional(), related: i.object({ documentId: i.string().optional(), __type: i.string() }).catchall(i.unknown()).nullish(), additionalFields: i.record(i.string(), i.unknown()).or(i.null()).optional(), audience: i.array(qa).or(i.null()).optional(), viewId: i.number().optional(), viewParentId: i.number().optional(), structureId: i.string().optional(), removed: i.boolean().optional(), isSearchActive: i.boolean().optional(), updated: i.boolean().optional() }), In = ja.extend({ items: i.lazy(() => In.array().or(i.null())).optional() }), Ba = i.object({ id: i.number(), documentId: i.string(), name: i.string(), slug: i.string(), locale: i.string(), visible: i.boolean(), items: i.array(In) }), Et = i.object({ // TODO: Proper message translation name: i.string().refine((e) => !e.includes(" "), { message: "No space allowed" }), label: i.string(), required: i.boolean().optional(), enabled: i.boolean().optional() }), Oa = Et.extend({ type: i.literal("select"), multi: i.boolean(), options: i.array(i.string()) }), Va = Et.extend({ type: i.enum(["boolean", "string"]), multi: i.literal(!1).optional(), options: i.array(i.string()).max(0).optional() }), _a = Et.extend({ type: i.literal("media"), multi: i.literal(!1).optional(), options: i.array(i.string()).max(0).optional() }), za = Va.or(_a).or(Oa), Ka = i.union([ i.literal("audience"), za ]), Ua = i.object({ uid: i.string(), name: i.string(), draftAndPublish: i.boolean(), isSingle: i.boolean(), description: i.string(), collectionName: i.string(), contentTypeName: i.string(), label: i.string(), labelSingular: i.string(), endpoint: i.string(), available: i.boolean(), visible: i.boolean() }), Wa = i.object({ additionalFields: i.array(Ka), allowedLevels: i.number(), availableAudience: i.object({ id: i.number(), documentId: i.string(), name: i.string(), key: i.string() }).array(), contentTypes: i.array(i.string()), contentTypesNameFields: i.record(i.string(), i.array(i.string())), contentTypesPopulate: i.record(i.string(), i.array(i.string())), gql: i.object({ navigationItemRelated: i.array(i.string()) }), pathDefaultFields: i.record(i.string(), i.string().array()), cascadeMenuAttached: i.boolean(), preferCustomContentTypes: i.boolean(), allowedContentTypes: i.string().array(), restrictedContentTypes: i.string().array(), isCacheEnabled: i.boolean().optional(), isCachePluginEnabled: i.boolean().optional() }), Qt = Wa.omit({ contentTypes: !0 }).extend({ contentTypes: Ua.array() }), Ha = i.object({ defaultLocale: i.string(), restLocale: i.string().array() }), Qa = i.enum(["collectionType", "singleType"]), Xa = i.object({ singularName: i.string(), pluralName: i.string(), displayName: i.string(), description: i.string().optional(), name: i.string().optional() }), vn = i.object({ required: i.boolean().optional(), max: i.number().optional(), min: i.number().optional(), minLength: i.number().optional(), maxLength: i.number().optional(), private: i.boolean().optional(), configurable: i.boolean().optional(), default: i.any().optional() }), Ga = i.enum([ "string", "text", "richtext", "blocks", "email", "password", "date", "time", "datetime", "timestamp", "boolean", "integer", "biginteger", "float", "decimal", "json", "relation", "media" ]), Za = vn.extend({ type: Ga }), Ja = vn.extend({ type: i.literal("enumeration"), enum: i.string().array() }), Ya = i.object({ type: i.literal("component"), component: i.string(), repeatable: i.boolean().optional() }), ei = i.object({ type: i.literal("dynamiczone"), components: i.string().array() }), ti = i.object({ media: i.literal("media"), allowedTypes: i.enum(["images", "videos", "audios", "files"]).array(), required: i.boolean().optional() }), ni = i.enum([ "oneToOne", "oneToMany", "manyToOne", "manyToMany", "morphToMany", "manyToMorph" ]), ai = i.object({ type: i.literal("relation"), relation: ni, target: i.string(), mappedBy: i.string().optional(), inversedBy: i.string().optional() }), ii = i.record( i.string(), i.union([ Za, Ja, Ya, ei, ai, ti ]) ), oi = i.object({ kind: Qa, collectionName: i.string(), info: Xa, options: i.object({ draftAndPublish: i.boolean().optional(), hidden: i.boolean().optional(), templateName: i.string().optional() }).optional(), attributes: ii, actions: i.record(i.string(), i.any()).optional(), lifecycles: i.record(i.string(), i.any()).optional(), uid: i.string(), apiName: i.string().optional(), // TODO?: remove associations: i.object({ model: i.string(), alias: i.string() }).array().optional(), modelName: i.string().optional(), plugin: i.string().optional(), pluginOptions: i.record(i.string(), i.any()).optional(), isSingle: i.boolean().optional() }); oi.pick({ info: !0, kind: !0, attributes: !0, options: !0 }); const ri = i.object({ id: i.number(), documentId: i.string(), locale: i.string().or(i.null()).optional() }).and(i.record(i.string(), i.any())), li = i.object({ slug: i.string() }), si = i.object({ externalPath: i.string().or(i.null()).optional(), path: i.string().or(i.null()).optional(), related: i.object({ documentId: i.string().optional(), __type: i.string() }).catchall(i.unknown()).nullish(), title: i.string(), type: bn, uiRouterKey: i.string() }), Y = "navigation", ae = ta((e) => ({ getIndexPrefix() { return [Y]; }, readAll() { return e.get(`/${Y}`).then(({ data: n }) => Ba.array().parse(n)); }, readAllIndex() { return [Y, "navigations"]; }, delete(n) { return e.del(`/${Y}/${n}`); }, create(n) { return e.post(`/${Y}/`, n); }, update(n) { return e.put(`/${Y}/${n.documentId}`, n); }, purge({ documentId: n, withLangVersions: a }) { return e.del( `/${Y}/cache/purge/${n ?? ""}?clearLocalisations=${!!a}` ); }, slugify(n) { const a = new URLSearchParams(); return a.append("q", n), e.get(`/${Y}/slug?${a.toString()}`).then(({ data: r }) => li.parse(r)).then(({ slug: r }) => r); }, readConfig() { return e.get(`/${Y}/config`).then(({ data: n }) => Qt.parse(n)); }, readConfigIndex() { return [Y, "config"]; }, healthCheck() { return e.get("/_health"); }, healthCheckIndex() { return ["health"]; }, readNavigationItemFromLocale({ source: n, structureId: a, target: r, documentId: s }) { return e.get( `/${Y}/i18n/item/read/${s}/${n}/${r}?path=${a}` ); }, updateConfig(n) { return e.put(`/${Y}/config`, n).then(() => { }); }, restart() { return e.get(`/${Y}/settings/restart`).then(() => { }); }, restoreConfig() { return e.del(`/${Y}/config`).then(() => { }); }, readSettingsConfig() { return e.get(`/${Y}/settings/config`).then(({ data: n }) => { const a = Qt.parse(n); return { ...a, contentTypes: a.contentTypes.map(({ uid: r }) => r) }; }); }, readSettingsConfigIndex() { return [Y, "config"]; }, readContentType() { return e.get("/content-manager/content-types").then(({ data: n }) => Da.array().parse(n.data)); }, readContentTypeIndex() { return [Y, "content-manager", "content-types"]; }, readContentTypeItems({ uid: n, locale: a, query: r }) { const s = new URLSearchParams(); return r && s.append("_q", r), a && s.append("locale", a), e.get(`/${Y}/content-type-items/${n}?${s.toString()}`).then(({ data: o }) => ri.array().parse(o)); }, readContentTypeItemsIndex({ uid: n, locale: a, query: r }) { return [Y, "content-manager", "content-type-items", n, a, r]; }, readLocale() { return e.get(`/${Y}/settings/locale`).then((n) => Ha.parse(n.data)); }, readLocaleIndex() { return [Y, "locale"]; }, copyNavigationLocale({ documentId: n, source: a, target: r }) { return e.put(`/${Y}/i18n/copy/${n}/${a}/${r}`); }, copyNavigationItemLocale({ source: n, structureId: a = "", target: r }) { return e.get(`/${Y}/i18n/item/read/${n}/${r}?path=${a}`).then((s) => si.parse(s.data)); } })), di = /* @__PURE__ */ t(sa, {}), Pt = ({ isVisible: e = !1, isActionAsync: n = !1, children: a, onConfirm: r, onCancel: s, header: o, labelCancel: m, labelConfirm: y, iconConfirm: R, mainIcon: p = di }) => { const { formatMessage: g } = H(); return e ? /* @__PURE__ */ t( at.Root, { open: e, onOpenChange: (A) => { !A && e && s?.(void 0); }, title: o || g(l("components.confirmation.dialog.header", "Confirmation")), children: /* @__PURE__ */ h(at.Content, { children: [ /* @__PURE__ */ t(at.Body, { icon: p, children: /* @__PURE__ */ t(W, { justifyContent: "center", children: /* @__PURE__ */ t(q, { id: "dialog-confirm-description", children: a || g(l("components.confirmation.dialog.description")) }) }) }), /* @__PURE__ */ h(at.Footer, { children: [ /* @__PURE__ */ t(at.Cancel, { children: /* @__PURE__ */ t(oe, { fullWidth: !0, onClick: s, variant: "tertiary", disabled: n, children: m || g(l("components.confirmation.dialog.button.cancel", "Cancel")) }) }), /* @__PURE__ */ t( oe, { fullWidth: !0, onClick: r, variant: "danger-light", startIcon: R || /* @__PURE__ */ t(ct, {}), disabled: n, children: y || g(l("components.confirmation.dialog.button.confirm", "Confirm")) } ) ] }) ] }) } ) : null; }, Xt = /* @__PURE__ */ t($e, {}), ci = ({ onConfirm: e, onCancel: n }) => { const { formatMessage: a } = H(); return /* @__PURE__ */ t( Pt, { isVisible: !0, header: a(l("pages.view.actions.i18nCopyItems.confirmation.header")), labelConfirm: a(l("pages.view.actions.i18nCopyItems.confirmation.confirm")), iconConfirm: Xt, mainIcon: Xt, onConfirm: e, onCancel: n, children: a(l("pages.view.actions.i18nCopyItems.confirmation.content")) } ); }, kt = () => { const e = ne(), n = ae(e); return Ke({ queryKey: n.readLocaleIndex(), queryFn: n.readLocale, staleTime: 1 / 0 }); }, Cn = (e) => { const n = ne(), a = ae(n); return Ke({ queryKey: a.readContentTypeItemsIndex(e), queryFn: () => a.readContentTypeItems(e), staleTime: 1e3 * 60 * 3, enabled: !!e.uid }); }, ui = () => { const e = ne(), n = ae(e); return Ke({ queryKey: n.readContentTypeIndex(), queryFn: () => n.readContentType(), staleTime: 1e3 * 60 * 3 }); }, pi = () => { const e = ne(), n = ae(e), a = tt(); return () => { a.resetQueries({ queryKey: n.readAllIndex() }); }; }, mi = () => { const e = ne(), n = ae(e), a = tt(); return () => { a.resetQueries({ queryKey: n.readContentTypeIndex() }); }; }, Mt = () => { const e = ne(), n = ae(e); return Ke({ queryKey: n.readAllIndex(), queryFn() { return n.readAll().then( (a) => a.map( (r) => ({ ...r, items: r.items.map(Dt) }) ) ); }, staleTime: 1e3 * 60 * 5 }); }, gi = () => { const e = tt(), n = ne(), a = ae(n); return G(() => { e.invalidateQueries({ queryKey: a.getIndexPrefix() }); }, [e, n, a]); }, hi = () => { const e = ne(), n = ae(e); return je({ mutationFn(a) { return Promise.all(a.map(n.delete)); } }); }, fi = () => { const e = ne(), n = ae(e); return je({ mutationFn: n.copyNavigationItemLocale }); }, yi = () => { const e = ne(), n = ae(e), a = tt(); return je({ mutationFn: n.copyNavigationLocale, onSuccess() { a.invalidateQueries({ queryKey: n.readAllIndex() }); } }); }, bi = () => { const e = ne(), n = ae(e), a = tt(); return je({ mutationFn: n.create, onSuccess() { a.invalidateQueries({ queryKey: n.readAllIndex() }); } }); }, Tn = (e) => { const n = ne(), a = ae(n), r = tt(); return je({ mutationFn: a.update, onSuccess() { r.invalidateQueries({ queryKey: a.readAllIndex() }), e?.(); } }); }, wn = () => { const e = ne(), n = ae(e); return je({ mutationFn(a) { return a?.length ? Promise.all( a.map((r) => n.purge({ documentId: r, withLangVersions: !0 })) ) : n.purge({}); } }); }, pt = () => { const e = ne(), n = ae(e); return Ke({ queryKey: n.readConfigIndex(), queryFn: n.readConfig }); }, Ii = (e) => { const [n, a] = B(!1), [r, s] = B(void 0), o = G(() => { a(!1); }, [a]), m = G(() => { r && (e(r), a(!1)); }, [e, r]), y = ge( () => n ? /* @__PURE__ */ t(ci, { onConfirm: m, onCancel: o }) : null, [n, m, o] ); return ge( () => ({ setI18nCopyModalOpened: a, setI18nCopySourceLocale: s, i18nCopyItemsModal: y, i18nCopySourceLocale: r }), [s, a, y, r] ); }, Dt = (e) => ({ ...e, viewId: Math.floor(Math.random() * 152e4), items: e.items?.map(Dt) }), ot = (e = []) => na(e, ["order"], ["asc"]).map((n, a) => { const r = a + 1; return { ...n, order: r, updated: n.updated || r !== n.order }; }), mt = (e, n) => e.type === "INTERNAL" ? { type: "INTERNAL", collapsed: !!e.collapsed, id: e.id, documentId: e.documentId, menuAttached: !!e.menuAttached, order: e.order ?? 0, path: e.path, title: e.title, uiRouterKey: e.uiRouterKey, additionalFields: e.additionalFields, audience: e.audience?.map( (a) => n.availableAudience.find((r) => r.documentId === a) ) ?? [], autoSync: e.autoSync, items: e.items?.length ? et(e, e.items, n) : e.items, related: { __type: e.relatedType, documentId: e.related }, viewId: e.viewId, viewParentId: e.viewParentId, structureId: e.structureId, removed: e.removed, updated: e.updated } : e.type === "EXTERNAL" ? { type: "EXTERNAL", collapsed: !!e.collapsed, id: e.id, documentId: e.documentId, menuAttached: !!e.menuAttached, order: e.order ?? 0, title: e.title, uiRouterKey: e.uiRouterKey, additionalFields: e.additionalFields, autoSync: e.autoSync, items: e.items?.length ? et(e, e.items, n) : e.items, path: "", viewId: e.viewId, structureId: e.structureId, viewParentId: e.viewParentId, removed: e.removed, updated: e.updated, externalPath: e.externalPath ?? "", audience: e.audience?.map( (a) => n.availableAudience.find((r) => r.documentId === a) ) ?? [] } : { type: "WRAPPER", collapsed: !!e.collapsed, id: e.id, documentId: e.documentId, menuAttached: !!e.menuAttached, order: e.order ?? 0, path: e.path ?? "", title: e.title, uiRouterKey: e.uiRouterKey, additionalFields: e.additionalFields, audience: e.audience?.map( (a) => n.availableAudience.find((r) => r.documentId === a) ) ?? [], autoSync: e.autoSync, items: e.items?.length ? et(e, e.items, n) : e.items, viewId: e.viewId, viewParentId: e.viewParentId, structureId: e.structureId, removed: e.removed, updated: e.updated }, et = (e, n = [], a) => { if (!e.viewParentId) { if (e.viewId) { const s = n.map((o) => o.viewId === e.viewId ? mt(e, a) : { ...o, items: o.items?.length ? et(e, o.items, a) : o.items }); return ot(s); } return [ ...ot([...n, mt({ ...e, viewId: Date.now() }, a)]) ]; } const r = n.map((s) => { const o = s.items || []; if (e.viewParentId === s.viewId) { if (!e.viewId) return { ...s, items: [ ...ot([ ...o, mt({ ...e, viewId: Date.now() }, a) ]) ] }; const m = o.map((y) => y.viewId === e.viewId ? mt(e, a) : y); return { ...s, items: ot(m) }; } return { ...s, items: s.items?.length ? et(e, s.items, a) : s.items }; }); return ot(r); }, yt = (e, n) => { const a = n?.contentTypes ?? [], r = n?.contentTypesNameFields ?? {}, s = r.default ?? [], { __collectionUid: o } = e, m = a.find(({ uid: g }) => g === o); if (m?.isSingle) return m.labelSingular; const y = [ ...s, ...s.map((g) => gn(g)) ], R = me( r, `${m ? m.uid : o}`, y ), p = (ye(R) ? y : R).map((g) => e[g]).filter((g) => g); return St(p) || ""; }, vi = ({ relatedRef: e, relatedType: n = {}, type: a, isCollection: r }) => r ? n.available || e.available : a === "INTERNAL" && (e ? "publishedAt" in e : !1) ? me(e, "publishedAt", !0) : !0, ze = (e, n = !1) => { const { __type: a, documentId: r } = e.type === "INTERNAL" && e.related ? e.related : { __type: "", documentId: "" }; return e.type === "INTERNAL" ? { type: "INTERNAL", id: e.id, documentId: e.documentId, additionalFields: e.additionalFields ?? {}, path: e.path ?? "", relatedType: a, related: r, title: e.title, uiRouterKey: e.uiRouterKey, autoSync: e.autoSync ?? void 0, collapsed: e.collapsed, externalPath: void 0, order: e.order ?? 0, menuAttached: e.menuAttached, viewId: e.viewId, viewParentId: e.viewParentId, items: n ? e.items : e.items?.map((s) => ze(s)) ?? void 0, removed: e.removed, updated: e.updated, isSearchActive: e.isSearchActive } : e.type === "EXTERNAL" ? { type: "EXTERNAL", id: e.id, documentId: e.documentId, additionalFields: e.additionalFields ?? {}, title: e.title, uiRouterKey: e.uiRouterKey, autoSync: e.autoSync ?? void 0, collapsed: e.collapsed, externalPath: e.externalPath, order: e.order ?? 0, menuAttached: e.menuAttached, viewId: e.viewId, viewParentId: e.viewParentId, items: n ? e.items : e.items?.map((s) => ze(s)) ?? void 0, removed: e.removed, updated: e.updated, isSearchActive: e.isSearchActive } : { type: "WRAPPER", id: e.id, documentId: e.documentId, additionalFields: e.additionalFields ?? {}, title: e.title, uiRouterKey: e.uiRouterKey, autoSync: e.autoSync ?? void 0, collapsed: e.collapsed, order: e.order ?? 0, menuAttached: e.menuAttached, viewId: e.viewId, viewParentId: e.viewParentId, items: n ? e.items : e.items?.map((s) => ze(s)) ?? void 0, removed: e.removed, updated: e.updated, isSearchActive: e.isSearchActive, path: e.path ?? "" }; }, Nn = (e) => e.find(({ isPending: n }) => n), Je = (e, n) => e.collapsed !== n ? { ...e, collapsed: n, updated: !0, items: e.items?.map((a) => Je(a, n)) } : { ...e, items: e.items?.map((a) => Je(a, n)) }, nt = ({ start: e, end: n }) => /* @__PURE__ */ h(se.Footer, { children: [ /* @__PURE__ */ t(se.Close, { children: Gt(e) }), Gt(n) ] }), Gt = (e) => e ? /* @__PURE__ */ t(oe, { onClick: e.onClick, variant: e.variant, disabled: e.disabled, children: e.children }) : null, Ci = ({ alreadyUsedNames: e }) => d.object({ name: d.string().min(2).and(d.string().refine((n) => !e.includes(n), "Name already used")), // TODO: add translation visible: d.boolean() }), An = ({ navigation: e, onChange: n, alreadyUsedNames: a = [], isLoading: r }) => { const [s, o] = B({}), [m, y] = B(), { formatMessage: R } = H(), { name: p, visible: g } = s, A = (v, w, c) => { if (c) { let T = v, F = w; if (st(v)) { const { name: V, value: he } = v.target; T = V, F = Xe(F) ? he : F; } return It(T) && b(T, F), c(v, F); } }, b = (v, w) => { o(vt({ ...s }, v, w)); }, E = (v) => { const w = me(m, v); if (w) return w; }; return te(() => { e && (e.name ? o({ ...e }) : (o({ name: "New navigation", visible: !0 }), n({ name: "New navigation", visible: !0, disabled: !0 }))); }, []), te(() => { if (`${p}-${g}` != `${e.name}-${e.visible}`) { const { error: v } = Ci({ alreadyUsedNames: a }).safeParse(s); n({ ...e, name: p, visible: g, disabled: !ye(v?.issues) }), y(v ? v.issues.reduce((w, c) => ({ ...w, [c.path.join(".")]: c.message }), {}) : void 0); } }, [p, g]), /* @__PURE__ */ t( bt, { width: "auto", height: "auto", method: "POST", initialValues: s, children: ({ values: v, onChange: w }) => /* @__PURE__ */ h(I.Root, { gap: 5, children: [ /* @__PURE__ */ t(I.Item, { col: 6, children: /* @__PURE__ */ t( X, { name: "name", label: R(l("popup.navigation.form.name.label", "Name")), error: E("name"), children: /* @__PURE__ */ t( We, { name: "name", type: "string", placeholder: R( l("popup.navigation.form.name.placeholder", "Navigations's name") ), onChange: (c, T) => A(c, T, w), value: v.name, disabled: r } ) } ) }), /* @__PURE__ */ t(I.Item, { col: 6, children: /* @__PURE__ */ t( X, { name: "visible", label: R(l("popup.navigation.form.visible.label", "Visibility")), error: E("visible"), children: /* @__PURE__ */ t( De, { name: "visible", checked: v.visible, onChange: (c) => A(c, !v.visible, w), onLabel: R(l("popup.navigation.form.visible.toggle.visible")), offLabel: R(l("popup.navigation.form.visible.toggle.hidden")), disabled: r, width: "100%" } ) } ) }) ] }) } ); }, Ti = { name: "", items: [], visible: !1 }, wi = ({ setState: e, current: n, isLoading: a, alreadyUsedNames: r }) => { const s = G( ({ disabled: o, ...m }) => { e({ view: "CREATE", current: m, alreadyUsedNames: r, disabled: o }); }, [e] ); return /* @__PURE__ */ t( An, { alreadyUsedNames: r, navigation: n, onChange: s, isLoading: a } ); }, Ni = ({ onSubmit: e, onReset: n, disabled: a, isLoading: r }) => { const { formatMessage: s } = H(); return /* @__PURE__ */ t( nt, { start: { children: s(l("popup.item.form.button.cancel")), variant: "tertiary", disabled: r, onClick: n }, end: { children: s(l("popup.navigation.manage.button.save")), variant: "default", disabled: r || a, onClick: e } } ); }, Ai = /* @__PURE__ */ t(Ft, {}), Ri = /* @__PURE__ */ t($t, {}), Zt = /* @__PURE__ */ t(da, {}), Si = ({ navigations: e, selected: n, setState: a }) => { const r = pt(), s = !!n.length, { formatMessage: o } = H(), m = kt(), y = G( () => a({ navigations: e, selected: s ? [] : e.map((c) => c), view: "LIST" }), [a, e, s] ), R = ge(() => new Set(n.map(ft("documentId"))), [n]), p = (c, T) => () => { a({ navigations: e, selected: T ? n.filter(({ documentId: F }) => F !== c.documentId) : n.concat([c]), view: "LIST" }); }, g = (c) => () => { a({ view: "EDIT", current: c, navigation: c, alreadyUsedNames: e.reduce( (T, { name: F }) => F !== c.name ? T.concat([F]) : T, [] ) }); }, A = (c) => () => { a({ view: "DELETE", navigations: c }); }, b = (c) => () => { a({ view: "CACHE_PURGE", navigations: c }); }, E = G(A(n), [A]), v = G(b(n), [b]), w = (c) => [c].concat( e.filter( (T) => T.documentId === c.documentId && T.locale !== c.locale ) ); return /* @__PURE__ */ h($e, { children: [ /* @__PURE__ */ t(I.Root, { children: /* @__PURE__ */ t(I.Item, { col: 12, paddingBottom: 3, children: s ? /* @__PURE__ */ h(W, { direction: "row", gap: 1, children: [ /* @__PURE__ */ t(ee, { paddingRight: 3, children: o(l("popup.navigation.manage.table.hasSelected"), { count: n.length }) }), /* @__PURE__ */ t(oe, { onClick: E, variant: "tertiary", children: o(l("popup.navigation.manage.button.delete")) }), r.data?.isCacheEnabled ? /* @__PURE__ */ t(oe, { onClick: v, variant: "tertiary", children: o(l("popup.navigation.manage.button.purge")) }) : null ] }) : null }) }), /* @__PURE__ */ h(ln, { rowCount: e.length, colCount: 6, children: [ /* @__PURE__ */ t(sn, { children: /* @__PURE__ */ h(ht, { children: [ /* @__PURE__ */ t(Se, { children: /* @__PURE__ */ t(_t, { onCheckedChange: y, check: s }) }), /* @__PURE__ */ t(Se, { children: /* @__PURE__ */ t(q, { textColor: "neutral800", children: o(l("popup.navigation.manage.table.id")) }) }), /* @__PURE__ */ t(Se, { children: /* @__PURE__ */ t(q, { textColor: "neutral800", children: o(l("popup.navigation.manage.table.name")) }) }), /* @__PURE__ */ t(Se, { children: /* @__PURE__ */ t(q, { textColor: "neutral800", children: o(l("popup.navigation.manage.table.locale")) }) }), /* @__PURE__ */ t(Se, { children: /* @__PURE__ */ t(q, { textColor: "neutral800", children: o(l("popup.navigation.manage.table.visibility")) }) }), /* @__PURE__ */ t(Se, { children: r.data?.isCacheEnabled ? /* @__PURE__ */ t(W, { direction: "row", children: /* @__PURE__ */ t(ee, { paddingLeft: 1, children: /* @__PURE__ */ t( Be, { onClick: b([]), label: o(l("popup.navigation.manage.button.purge")), noBorder: !0, children: Zt } ) }) }) : null }) ] }) }), /* @__PURE__ */ t(dn, { children: e.filter(({ locale: c }) => c === m.data?.defaultLocale).map((c) => /* @__PURE__ */ h(ht, { children: [ /* @__PURE__ */ t(Fe, { children: /* @__PURE__ */ t( _t, { onCheckedChange: p( c, R.has(c.documentId) ), checked: R.has(c.documentId) } ) }), /* @__PURE__ */ t(Fe, { children: /* @__PURE__ */ t(q, { textColor: "neutral800", children: c.documentId }) }), /* @__PURE__ */ t(Fe, { children: /* @__PURE__ */ t(q, { textColor: "neutral800", children: c.name }) }), /* @__PURE__ */ t(Fe, { children: /* @__PURE__ */ t(q, { textColor: "neutral800", children: w(c).map(ft("locale")).join(", ") }) }), /* @__PURE__ */ t(Fe, { children: /* @__PURE__ */ t(q, { textColor: "neutral800", children: c.visible ? o(l("popup.navigation.manage.navigation.visible")) : o(l("popup.navigation.manage.navigation.hidden")) }) }), /* @__PURE__ */ t(Fe, { children: /* @__PURE__ */ h(W, { width: "100%", direction: "row", alignItems: "center", justifyContent: "flex-end", children: [ /* @__PURE__ */ t(ee, { paddingLeft: 1, children: /* @__PURE__ */ t( Be, { onClick: g(c), label: o(l("popup.navigation.manage.button.edit")), noBorder: !0, children: Ai } ) }), /* @__PURE__ */ t(ee, { paddingLeft: 1, children: /* @__PURE__ */ t( Be, { onClick: A([c]), label: o(l("popup.navigation.manage.button.delete")), noBorder: !0, children: Ri } ) }), r.data?.isCacheEnabled ? /* @__PURE__ */ t(ee, { paddingLeft: 1, children: /* @__PURE__ */ t( Be, { onClick: b([c]), label: o(l("popup.navigation.manage.button.purge")), noBorder: !0, children: Zt } ) }) : null ] }) }) ] }, c.documentId)) }) ] }) ] }); }, Fi = ({ onClose: e, state: n, setState: a, navigations: r, isLoading: s }) => { const { formatMessage: o } = H(); return /* @__PURE__ */ t( nt, { start: { onClick: e, variant: "tertiary", disabled: s, children: o(l("popup.item.form.button.cancel")) }, end: { onClick: () => a({ view: "CREATE", alreadyUsedNames: r.map(({ name: m }) => m), current: Ti }), variant: "default", disabled: s, children: o(l("popup.navigation.manage.button.create")) } } ); }, $i = ({ navigations: e }) => { const { formatMessage: n } = H(); return /* @__PURE__ */ h(I.Root, { children: [ /* @__PURE__ */ t(I.Item, { col: 12, paddingBottom: 1, children: /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(q, { variant: "beta", children: n(l("popup.navigation.manage.delete.header")) }) }) }), /* @__PURE__ */ t(I.Item, { col: 12, paddingBottom: 1, children: /* @__PURE__ */ t(q, { variant: "omega", fontWeight: "semiBold", children: xi(e) }) }) ] }); }, Li = ({ state: e, onSubmit: n, onReset: a, isLoading: r }) => { const { formatMessage: s } = H(); return /* @__PURE__ */ t( nt, { start: { children: s(l("popup.item.form.button.cancel")), disabled: r, onClick: a, variant: "tertiary" }, end: { children: s(l("popup.navigation.manage.button.delete")), disabled: r, onClick: n, variant: "danger" } } ); }, xi = (e) => e.map(ft("name")).join(", "), Ei = ({ errors: e }) => { const { formatMessage: n } = H(), { toggleNotification: a } = ut(); return te(() => { e.map((r) => { a({ type: "warning", message: n({ id: "", defaultMessage: r.message }) }), console.error(r); }); }, []), /* @__PURE__ */ t(I.Root, { children: /* @__PURE__ */ t(I.Item, { col: 12, children: n(l("popup.navigation.manage.error.message")) }) }); }, Pi = ({ onReset: e }) => { const { formatMessage: n } = H(); return /* @__PURE__ */ t( nt, { end: { children: n(l("popup.navigation.manage.button.goBack")), onClick: e, variant: "secondary" } } ); }, ki = ({ alreadyUsedNames: e, current: n, isLoading: a, navigation: r, setState: s }) => { const o = ge(() => n ?? r, [n]), m = G( ({ disabled: y, ...R }) => { s({ view: "EDIT", alreadyUsedNames: e, current: R, disabled: y, navigation: r }); }, [s, r, e] ); return /* @__PURE__ */ t( An, { navigation: o, onChange: m, isLoading: a, alreadyUsedNames: e } ); }, Mi = ({ onSubmit: e, onReset: n, disabled: a, isLoading: r }) => { const { formatMessage: s } = H(); return /* @__PURE__ */ t( nt, { start: { children: s(l("popup.item.form.button.cancel")), disabled: r, onClick: n, variant: "tertiary" }, end: { children: s(l("popup.navigation.manage.button.save")), disabled: r || a, onClick: e, variant: "secondary" } } ); }, Di = ({ navigations: e }) => { const { formatMessage: n } = H(); return /* @__PURE__ */ h(I.Root, { children: [ /* @__PURE__ */ t(I.Item, { col: 12, paddingBottom: 1, children: /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(q, { variant: "beta", children: n(l("popup.navigation.manage.purge.header")) }) }) }), /* @__PURE__ */ t(I.Item, { col: 12, paddingBottom: 1, children: /* @__PURE__ */ t(q, { variant: "omega", fontWeight: "semiBold", children: ji(e) }) }) ] }); }, qi = ({ onSubmit: e, onReset: n, isLoading: a }) => { const { formatMessage: r } = H(); return /* @__PURE__ */ t( nt, { start: { children: r(l("popup.item.form.button.cancel")), disabled: a, onClick: n, variant: "tertiary" }, end: { children: r(l("popup.navigation.manage.footer.button.purge")), disabled: a, onClick: e, variant: "danger" } } ); }, ji = (e) => e.map(ft("name")).join(", "), Bi = ({ initialState: e, isOpened: n, onClose: a }) => { const { formatMessage: r } = H(), [s, o] = B(e), { toggleNotification: m } = ut(), y = gi(), R = hi(), p = bi(), g = Tn(), A = wn(), b = Mt(), E = kt(), v = ge( () => dt(b.data ?? [], "id"), [b.data] ), w = Nn([ R, b, p, g, A, E ]), c = G(() => o({ view: "INITIAL" }), [o]), T = G(async () => { const M = s.view === "DELETE" ? () => { R.mutate( s.navigations.reduce((J, re) => (re.documentId && J.push(re.documentId), J), []), { onSuccess: y } ); } : s.view === "EDIT" ? () => { g.mutate(s.current, { onSuccess() { y(), m({ type: "success", message: r(l("notification.navigation.submit")) }); }, onError(J) { console.warn(J), m({ type: "warning", message: r(l("notification.navigation.error"), { errorTitles: "" }) }); } }); } : s.view === "CREATE" && s.current ? () => { p.mutate(s.current, { onSuccess() { y(), m({ type: "success", message: r(l("notification.navigation.submit")) }); }, onError(J) { console.warn(J), m({ type: "warning", message: r(l("notification.navigation.error"), { errorTitles: "" }) }); } }); } : s.view === "CACHE_PURGE" ? () => { A.mutate( s.navigations.reduce((J, re) => (re.documentId && J.push(re.documentId), J), []), { onSuccess: y } ); } : () => { }; try { M(), o({ view: "INITIAL" }); } catch (J) { o({ view: "ERROR", errors: J instanceof Error ? [J] : [] }); } }, [ s, o, y, p, A, g, R, m, r, l ]); te(() => { (s.view === "INITIAL" || s.view === "LIST") && o({ view: "LIST", navigations: v, selected: [] }); }, [s.view, v]); const F = Oi(s, r, !!w), V = Vi(s, o, !!w), he = _i({ state: s, setState: o, onClose: a, onSubmit: T, onReset: c, navigations: v, isLoading: !!w }); return /* @__PURE__ */ t( se.Root, { labelledBy: "condition-modal-breadcrumbs", onOpenChange: (M) => { M || a?.(); }, open: n, children: /* @__PURE__ */ h(se.Content, { children: [ /* @__PURE__ */ t(se.Header, { children: /* @__PURE__ */ t( q, { variant: "omega", fontWeight: "bold", textColor: "neutral800", as: "h2", children: F } ) }), /* @__PURE__ */ t(se.Body, { children: V }), he ] }) } ); }, Oi = (e, n, a) => { switch (e.view) { case "LIST": case "CREATE": case "ERROR": case "CACHE_PURGE": case "DELETE": return /* @__PURE__ */ h(W, { direction: "row", children: [ a ? /* @__PURE__ */ t(At, { small: !0 }) : null, n(l(`popup.navigation.manage.header.${e.view}`)) ] }); case "EDIT": return /* @__PURE__ */ h(W, { direction: "row", children: [ a ? /* @__PURE__ */ t(At, { small: !0 }) : null, n(l("popup.navigation.manage.header.EDIT"), { name: e.navigation.name }) ] }); case "INITIAL": return null; default: return qt(e); } }, Vi = (e, n, a) => { const r = { setState: n, isLoading: a }; switch (e.view) { case "LIST": return /* @__PURE__ */ t(Si, { ...e, ...r }); case "EDIT": return /* @__PURE__ */ t(ki, { ...e, ...r }); case "CREATE": return /* @__PURE__ */ t(wi, { ...e, ...r }); case "DELETE": return /* @__PURE__ */ t($i, { ...e, ...r }); case "CACHE_PURGE": return /* @__PURE__ */ t(Di, { ...e, ...r }); case "INITIAL": return /* @__PURE__ */ t(At, { small: !0 }); case "ERROR": return /* @__PURE__ */ t(Ei, { ...e, ...r }); default: return qt(e); } }, _i = (e) => { switch (e.state.view) { case "LIST": return /* @__PURE__ */ t(Fi, { ...e }); case "CREATE": return /* @__PURE__ */ t(Ni, { ...e, disabled: e.state.disabled }); case "EDIT": return /* @__PURE__ */ t(Mi, { ...e, disabled: e.state.disabled }); case "DELETE": return /* @__PURE__ */ t(Li, { ...e }); case "CACHE_PURGE": return /* @__PURE__ */ t(qi, { ...e }); case "ERROR": return /* @__PURE__ */ t(Pi, { ...e }); case "INITIAL": return null; default: return qt(e.state); } }, qt = (e) => (console.warn(`Unknown state "${e?.view}". (${JSON.stringify(e)})`), null), zi = () => { const [e, n] = B(!1), a = G(() => n(!0), [n]), r = G(() => n(!1), [n]), s = ge( () => e ? /* @__PURE__ */ t(Bi, { initialState: { view: "INITIAL" }, isOpened: !0, onClose: r }) : null, [e, r] ); return ge( () => ({ navigationManagerModal: s, openNavigationManagerModal: a, closeNavigationManagerModal: r }), [s, a, r] ); }, Jt = /* @__PURE__ */ t(ct, {}), Ki = ({ activeNavigation: e, availableNavigations: n, structureHasErrors: a, structureHasChanged: r, handleChangeSelection: s, handleLocalizationSelection: o, handleSave: m, handleCachePurge: y, permissions: R = {}, locale: p, currentLocale: g }) => { const { formatMessage: A } = H(), { openNavigationManagerModal: b, navigationManagerModal: E } = zi(), v = !!p.restLocale, { canUpdate: w } = R, c = pt(); return /* @__PURE__ */ t($e, { children: /* @__PURE__ */ t( Ye.Header, { title: A(l("header.title", "UI Navigation")), subtitle: A(l("header.description")), primaryAction: /* @__PURE__ */ h(W, { direction: "row", size: 2, children: [ /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ h( I.Root, { gap: 4, style: c.data?.isCacheEnabled ? { display: "flex" } : void 0, children: [ v ? null : /* @__PURE__ */ t(I.Item, { col: 2 }), w && /* @__PURE__ */ t(I.Item, { col: 3, children: /* @__PURE__ */ t( oe, { onClick: b, startIcon: null, type: "button", variant: "secondary", fullWidth: !0, size: "S", children: A(l("header.action.manage")) } ) }), /* @__PURE__ */ t(I.Item, { col: w ? 4 : 10, children: /* @__PURE__ */ t(Vn.Root, { width: "100%", children: /* @__PURE__ */ t( He, { type: "select", placeholder: "Change navigation", name: "navigationSelect", onChange: (T) => { const F = n.find(({ documentId: V }) => T === V); F && s(F); }, value: e?.documentId, size: "S", style: null, children: n.filter(({ locale: T }) => T === g).map(({ documentId: T, name: F }) => /* @__PURE__ */ t(Qe, { value: T, children: F }, T)) } ) }) }), v ? /* @__PURE__ */ t(I.Item, { col: 2, children: /* @__PURE__ */ t( He, { type: "select", placeholder: A( l("pages.main.header.localization.select.placeholder") ), name: "navigationLocalizationSelect", onChange: o, value: g, size: "S", children: [p.defaultLocale, ...p.restLocale].map((T) => /* @__PURE__ */ t(Qe, { value: T, children: T }, T)) } ) }) : null, w && /* @__PURE__ */ t(I.Item, { col: 3, children: /* @__PURE__ */ t( oe, { onClick: m, startIcon: Jt, disabled: a || !r, type: "submit", fullWidth: !0, size: "S", children: A(l("submit.cta.save")) } ) }), c.data?.isCacheEnabled && /* @__PURE__ */ t(I.Item, { col: 3, children: /* @__PURE__ */ t( oe, { onClick: y, startIcon: Jt, variant: "danger", type: "submit", fullWidth: !0, size: "S", children: A(l("submit.cta.cache.purge")) } ) }) ] } ) }), w && E ] }), secondaryAction: /* @__PURE__ */ t(On, { icon: /* @__PURE__ */ t(ca, { "aria-hidden": !0 }), children: e ? A(l("header.meta"), { id: e?.documentId, key: e?.slug }) : null }) } ) }); }, Ui = ({ startActions: e, endActions: n }) => /* @__PURE__ */ h(W, { justifyContent: "space-between", width: "100%", children: [ /* @__PURE__ */ t(W, { alignItems: "space-between", children: e }), /* @__PURE__ */ t(W, { alignItems: "space-between", children: n }) ] }), Wi = qe.div` border-radius: 50%; background: #dcdce4; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; margin-right: 8px; `, Hi = ({ toggle: e, collapsed: n, itemsCount: a }) => /* @__PURE__ */ h( W, { justifyContent: "space-between", alignItems: "center", onClick: e, cursor: "pointer", style: { marginRight: "16px" }, children: [ /* @__PURE__ */ t(Wi, { children: n ? /* @__PURE__ */ t(ua, { width: "16px", height: "9px" }) : /* @__PURE__ */ t(pa, { width: "16px", height: "9px" }) }), /* @__PURE__ */ h(q, { variant: "pi", children: [ a, " nested items" ] }) ] } ), Rn = qe(_n)` border: 1px solid ${({ theme: e, borderColor: n }) => e.colors[n]}; ${({ small: e, theme: n }) => e && ` padding: ${n.spaces[1]} ${n.spaces[2]}; margin: 0px ${n.spaces[3]}; vertical-align: middle; cursor: default; span { font-size: .65rem; line-height: 1; vertical-align: middle; } `} `, Qi = qe.span` display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; padding: ${({ theme: e }) => e.spaces[2]}; background: ${({ theme: e, isActive: n }) => n ? e.colors.neutral150 : e.colors.neutral0}; border: 1px solid ${({ theme: e }) => e.colors.neutral200}; border-radius: ${({ theme: e }) => e.borderRadius}; cursor: pointer; transition: background-color 0.3s ease-in; svg { height: ${({ theme: e }) => e.spaces[3]}; width: ${({ theme: e }) => e.spaces[3]}; > g, path { fill: ${({ theme: e }) => e.colors.neutral500}; } } &:hover { svg { > g, path { fill: ${({ theme: e }) => e.colors.neutral600}; } } } &:active { svg { > g, path { fill: ${({ theme: e }) => e.colors.neutral400}; } } } &[aria-disabled='true'] { background-color: ${({ theme: e }) => e.colors.neutral150}; svg { path { fill: ${({ theme: e }) => e.colors.neutral600}; } } } `, Xi = Ln.forwardRef((e, n) => /* @__PURE__ */ t(Qi, { ...e, ref: n, children: /* @__PURE__ */ t(ma, {}) })), Gi = qe(zn)` width: 100%; display: flex; flex-direction: row; justify-content: s