sanity
Version:
Sanity is a real-time content infrastructure with a scalable, hosted backend featuring a Graph Oriented Query Language (GROQ), asset pipelines and fast edge caches
471 lines (470 loc) • 21.5 kB
JavaScript
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { c } from "react/compiler-runtime";
import { Box, Flex, Text, Button, TextInput, MenuDivider, Menu, Card } from "@sanity/ui";
import { motion, AnimatePresence } from "motion/react";
import { IntentLink, useRouter } from "sanity/router";
import { styled } from "styled-components";
import { MenuItem, MenuButton, Button as Button$1 } from "./index.js";
import { forwardRef, useState } from "react";
import "react-i18next";
import "sanity/_singletons";
import "@sanity/util/paths";
import "react-fast-compare";
import { useTranslation, variantsLocaleNamespace, AnimatedTextWidth, getVariantId, VARIANTS_INTENT, getVariantTitle, oversizedButtonStyle, useSetVariant, useAllVariants, decodeVariantIdFromRoute, filterVariantsForSearch, usePerspective, getReleaseTone, isDraftPerspective, isPublishedPerspective, ReleasesNav } from "./index2.js";
import "history";
import "@sanity/icons/ArrowLeft";
import "@sanity/icons/Launch";
import "@sanity/logos";
import "@sanity/icons/ChevronRight";
import "react-rx";
import "@sanity/client";
import "rxjs";
import "rxjs/operators";
import "./version.js";
import "@sanity/icons/Checkmark";
import "react-is";
import "@sanity/client/csm";
import "quick-lru";
import "lodash-es/throttle.js";
import "lodash-es/isEqual.js";
import "@sanity/icons/Document";
import "@sanity/icons/Image";
import "@sanity/uuid";
import "@sanity/color";
import "color2k";
import "lodash-es/isString.js";
import "@sanity/icons/Copy";
import "@sanity/icons/Clipboard";
import "./createAgentBundlesStore.js";
import "@sanity/telemetry/react";
import "@portabletext/editor";
import "@sanity/types";
import "@sanity/icons/Revert";
import "@sanity/ui/theme";
import "date-fns/differenceInDays";
import "date-fns/differenceInHours";
import "date-fns/differenceInMinutes";
import "date-fns/differenceInMonths";
import "date-fns/differenceInSeconds";
import "date-fns/differenceInWeeks";
import "date-fns/differenceInYears";
import "@sanity/icons/AddCircle";
import "@sanity/icons/Calendar";
import "@sanity/icons/Circle";
import "@sanity/icons/Close";
import "@sanity/icons/Edit";
import "@sanity/icons/Publish";
import "@sanity/icons/Timeline";
import "@sanity/icons/Trash";
import "@sanity/icons/Unpublish";
import "@sanity/icons/ArrowDown";
import "@sanity/icons/ArrowRight";
import "@sanity/util/legacyDateFormat";
import "@sanity/diff-patch";
import "@sanity/icons/ErrorOutline";
import "@sanity/diff";
import "mendoza";
import "@sanity/icons/InfoOutline";
import "@sanity/icons/WarningOutline";
import "@portabletext/sanity-bridge";
import "@sanity/id-utils";
import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
import "date-fns/addHours";
import "date-fns/startOfHour";
import "@sanity/icons/Bolt";
import "@sanity/icons/Clock";
import "@sanity/icons/Dot";
import "@sanity/icons/EarthGlobe";
import "date-fns/format";
import "date-fns/isValid";
import "date-fns/parse";
import "lodash-es/flatten.js";
import "date-fns/getMinutes";
import "date-fns/parseISO";
import "date-fns/setMinutes";
import "@sanity/icons/EarthAmericas";
import "lodash-es/noop.js";
import "@sanity/icons/Search";
import "lodash-es/pick.js";
import "lodash-es/get.js";
import "@algorithm.ts/lcs";
import "lodash-es/intersection.js";
import "json-stable-stringify";
import "shallow-equals";
import "scroll-into-view-if-needed";
import "@sanity/schema/_internal";
import "lodash-es/groupBy.js";
import "lodash-es/sortBy.js";
import "lodash-es/compact.js";
import "lodash-es/keyBy.js";
import "lodash-es/partition.js";
import "lodash-es/toLower.js";
import "lodash-es/union.js";
import "lodash-es/uniq.js";
import "lodash-es/words.js";
import "lodash-es/isFinite.js";
import "@sanity/icons/Add";
import "observable-callback";
import "@sanity/util/content";
import "@sanity/icons/BulbOutline";
import "@sanity/icons/Unknown";
import "@sanity/icons/ToggleArrowRight";
import "lodash-es/isPlainObject.js";
import "@sanity/insert-menu";
import "@dnd-kit/sortable";
import "@sanity/icons/DragHandle";
import "@sanity/icons/AddDocument";
import "@sanity/icons/InsertAbove";
import "@sanity/icons/InsertBelow";
import "@tanstack/react-virtual";
import "lodash-es/startCase.js";
import "speakingurl";
import "@sanity/icons/Reset";
import "@sanity/icons/Sync";
import "@sanity/asset-utils";
import "@sanity/icons/AccessDenied";
import "@sanity/icons/HelpCircle";
import "@sanity/image-url";
import "@portabletext/react";
import "@sanity/icons";
import "@sanity/icons/Link";
import "lodash-es/pickBy.js";
import "swr";
import "@sanity/icons/Download";
import "@sanity/icons/Upload";
import "@sanity/icons/BinaryDocument";
import "@sanity/icons/Lock";
import "lodash-es/castArray.js";
import "nanoid";
import "use-hot-module-reload";
import "@sanity/icons/EllipsisHorizontal";
import "@sanity/icons/EyeOpen";
import "rxjs-mergemap-array";
import "@sanity/mutator";
import "react-focus-lock";
import "lodash-es/memoize.js";
import "lodash-es/sortedIndex.js";
import "lodash-es/difference.js";
import "lodash-es/identity.js";
import "lodash-es/values.js";
import "@sanity/comlink";
import "lodash-es/omit.js";
import "@isaacs/ttlcache";
import "@sanity/schema";
import "@sanity/util/client";
import "@sanity/util/concurrency-limiter";
import "lodash-es/uniqBy.js";
import "json-reduce";
import "rxjs-exhaustmap-with-trailing";
import "dataloader";
import "raf";
import "groq-js";
import "use-sync-external-store/with-selector";
import "is-network-error";
import "lodash-es/escapeRegExp.js";
import "@sanity/icons/Desktop";
import "@sanity/icons/Moon";
import "@sanity/icons/Sun";
import "lodash-es/isEmpty.js";
import "react-dom/server";
import "@sanity/icons/Controls";
import "@sanity/icons/Sort";
import "lodash-es/capitalize.js";
import "@sanity/icons/Undo";
import "@sanity/icons/Documents";
import "@sanity/icons/Menu";
import "@sanity/icons/AddUser";
import "@sanity/icons/Cog";
import "@sanity/icons/Users";
import "semver";
import "@sanity/icons/FaceHappy";
import "@sanity/icons/FaceIndifferent";
import "@sanity/icons/FaceSad";
import "@sentry/react";
import "@sanity/icons/Feedback";
import "@sanity/icons/Github";
import "@sanity/icons/Refresh";
import "@sanity/icons/Leave";
import "lodash-es/last.js";
import "react-dom/client";
import "@portabletext/toolkit";
import "date-fns/addWeeks";
import "date-fns/isAfter";
import "date-fns/isBefore";
import "lodash-es/debounce.js";
import "clsx";
import "@sanity/icons/LinkRemoved";
import "lodash-es/findIndex.js";
import "@sanity/diff-match-patch";
import "@sanity/icons/ChevronUp";
import "@xstate/react";
import "xstate";
import "date-fns/startOfMinute";
import "@sanity/icons/User";
import "@sanity/icons/CheckmarkCircle";
import "lodash-es/deburr.js";
import "@sanity/icons/ChevronLeft";
const RhombusIcon = forwardRef(function(props, ref) {
const $ = c(4);
let t0;
$[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("path", { d: "M10.5 3.78L17.22 10.5L10.5 17.22L3.78 10.5L10.5 3.78Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinejoin: "round" }), $[0] = t0) : t0 = $[0];
let t1;
return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ jsx("svg", { "data-sanity-icon": "rhombus", width: "1em", height: "1em", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref, children: t0 }), $[1] = props, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
}), OversizedButton$1 = /* @__PURE__ */ styled(IntentLink).withConfig({
displayName: "OversizedButton",
componentId: "sc-1ima4yx-0"
})(["", ""], oversizedButtonStyle);
function VariantDetailLink(t0) {
const $ = c(10), {
variant
} = t0;
let t1;
$[0] !== variant._id ? (t1 = getVariantId(variant._id), $[0] = variant._id, $[1] = t1) : t1 = $[1];
const encodedVariantId = t1;
let t2;
$[2] !== encodedVariantId ? (t2 = forwardRef(function(linkProps, ref) {
return /* @__PURE__ */ jsx(OversizedButton$1, { ...linkProps, ref, intent: VARIANTS_INTENT, params: {
id: encodedVariantId
} });
}), $[2] = encodedVariantId, $[3] = t2) : t2 = $[3];
const VariantLink = t2;
let t3;
$[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = {
maxWidth: "180px"
}, $[4] = t3) : t3 = $[4];
let t4;
$[5] !== variant ? (t4 = getVariantTitle(variant), $[5] = variant, $[6] = t4) : t4 = $[6];
let t5;
return $[7] !== VariantLink || $[8] !== t4 ? (t5 = /* @__PURE__ */ jsx(Button, { as: VariantLink, "data-as": "a", "data-testid": "variants-nav-label-link", icon: RhombusIcon, mode: "bleed", padding: 2, radius: "full", style: t3, text: t4 }), $[7] = VariantLink, $[8] = t4, $[9] = t5) : t5 = $[9], t5;
}
function CurrentVariantLabel(t0) {
const $ = c(6), {
selectedVariant
} = t0, {
t
} = useTranslation(variantsLocaleNamespace), animationKey = selectedVariant?._id ?? "default";
let t1;
$[0] !== selectedVariant || $[1] !== t ? (t1 = selectedVariant ? /* @__PURE__ */ jsx(VariantDetailLink, { variant: selectedVariant }) : /* @__PURE__ */ jsx(Box, { padding: 2, style: {
userSelect: "none",
overflow: "hidden"
}, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
/* @__PURE__ */ jsx(Text, { size: 0, children: /* @__PURE__ */ jsx(RhombusIcon, {}) }),
/* @__PURE__ */ jsx(Text, { "data-testid": "variants-nav-label", size: 1, textOverflow: "ellipsis", weight: "medium", children: t("navbar.variant.default") })
] }) }), $[0] = selectedVariant, $[1] = t, $[2] = t1) : t1 = $[2];
let t2;
return $[3] !== animationKey || $[4] !== t1 ? (t2 = /* @__PURE__ */ jsx(AnimatedTextWidth, { text: animationKey, children: t1 }), $[3] = animationKey, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
}
const StyledMenu = /* @__PURE__ */ styled(Menu).withConfig({
displayName: "StyledMenu",
componentId: "sc-1cdn8fr-0"
})(["min-width:240px;max-width:320px;> [data-ui='Stack']{gap:0;}"]), SectionHeader = /* @__PURE__ */ styled(Text).withConfig({
displayName: "SectionHeader",
componentId: "sc-1cdn8fr-1"
})(["text-transform:uppercase;letter-spacing:0.04em;"]), OversizedButton = /* @__PURE__ */ styled(Button).withConfig({
displayName: "OversizedButton",
componentId: "sc-1cdn8fr-2"
})(["", ""], oversizedButtonStyle);
function VariantsMenu() {
const $ = c(42), {
t
} = useTranslation(variantsLocaleNamespace), router = useRouter(), setVariant = useSetVariant(), {
data: variants
} = useAllVariants(), [filterQuery, setFilterQuery] = useState(""), t0 = router.stickyParams.variant ?? void 0;
let t1;
$[0] !== t0 ? (t1 = decodeVariantIdFromRoute(t0), $[0] = t0, $[1] = t1) : t1 = $[1];
const selectedVariantDocumentId = t1;
let t2;
$[2] !== selectedVariantDocumentId || $[3] !== variants ? (t2 = selectedVariantDocumentId ? variants.find((variant) => variant._id === selectedVariantDocumentId) : void 0, $[2] = selectedVariantDocumentId, $[3] = variants, $[4] = t2) : t2 = $[4];
const selectedVariant = t2;
let t3;
$[5] !== filterQuery || $[6] !== variants ? (t3 = filterVariantsForSearch(variants, filterQuery), $[5] = filterQuery, $[6] = variants, $[7] = t3) : t3 = $[7];
const filteredVariants = t3;
let t4;
$[8] !== setVariant ? (t4 = () => {
setVariant(void 0), setFilterQuery("");
}, $[8] = setVariant, $[9] = t4) : t4 = $[9];
const handleSelectDefault = t4;
let t5;
$[10] !== setVariant ? (t5 = (variant_0) => {
setVariant(variant_0), setFilterQuery("");
}, $[10] = setVariant, $[11] = t5) : t5 = $[11];
const handleSelectVariant = t5;
let t6;
$[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t6 = (event) => {
setFilterQuery(event.currentTarget.value);
}, $[12] = t6) : t6 = $[12];
const handleFilterChange = t6;
let t7;
$[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t7 = () => {
setFilterQuery("");
}, $[13] = t7) : t7 = $[13];
const handleMenuClose = t7, isDefaultSelected = !selectedVariant;
let t8;
$[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t8 = /* @__PURE__ */ jsx(OversizedButton, { "data-testid": "variants-nav-menu-button", iconRight: ChevronDownIcon, mode: "bleed", padding: 2, radius: "full" }), $[14] = t8) : t8 = $[14];
let t9;
$[15] !== t ? (t9 = t("navbar.variant.filter-placeholder"), $[15] = t, $[16] = t9) : t9 = $[16];
let t10;
$[17] !== filterQuery || $[18] !== t9 ? (t10 = /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(TextInput, { fontSize: 1, onChange: handleFilterChange, placeholder: t9, radius: 2, value: filterQuery }) }), $[17] = filterQuery, $[18] = t9, $[19] = t10) : t10 = $[19];
let t11;
$[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsx(MenuDivider, {}), $[20] = t11) : t11 = $[20];
let t12;
$[21] !== t ? (t12 = t("navbar.variant.default"), $[21] = t, $[22] = t12) : t12 = $[22];
let t13;
$[23] !== handleSelectDefault || $[24] !== isDefaultSelected || $[25] !== t12 ? (t13 = /* @__PURE__ */ jsx(MenuItem, { "data-testid": "variant-default", icon: RhombusIcon, onClick: handleSelectDefault, pressed: isDefaultSelected, selected: isDefaultSelected, text: t12 }), $[23] = handleSelectDefault, $[24] = isDefaultSelected, $[25] = t12, $[26] = t13) : t13 = $[26];
let t14;
$[27] !== filteredVariants || $[28] !== handleSelectVariant || $[29] !== selectedVariant?._id || $[30] !== t ? (t14 = filteredVariants.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(Box, { padding: 3, paddingBottom: 2, children: /* @__PURE__ */ jsx(SectionHeader, { muted: !0, size: 0, weight: "medium", children: t("navbar.variant.other") }) }),
filteredVariants.map((variant_1) => {
const isSelected = selectedVariant?._id === variant_1._id;
return /* @__PURE__ */ jsx(MenuItem, { "data-testid": `variant-${getVariantId(variant_1._id)}`, icon: RhombusIcon, onClick: () => handleSelectVariant(variant_1), pressed: isSelected, selected: isSelected, text: getVariantTitle(variant_1) }, variant_1._id);
})
] }), $[27] = filteredVariants, $[28] = handleSelectVariant, $[29] = selectedVariant?._id, $[30] = t, $[31] = t14) : t14 = $[31];
let t15;
$[32] !== t10 || $[33] !== t13 || $[34] !== t14 ? (t15 = /* @__PURE__ */ jsxs(StyledMenu, { "data-testid": "variants-nav-menu", padding: 0, children: [
t10,
t11,
t13,
t14
] }), $[32] = t10, $[33] = t13, $[34] = t14, $[35] = t15) : t15 = $[35];
let t16;
$[36] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t16 = [0, 0, 32, 0], $[36] = t16) : t16 = $[36];
let t17;
$[37] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t17 = ["bottom-end"], $[37] = t17) : t17 = $[37];
let t18;
$[38] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t18 = {
overflow: "hidden"
}, $[38] = t18) : t18 = $[38];
let t19;
$[39] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t19 = {
__unstable_margins: t16,
constrainSize: !0,
fallbackPlacements: t17,
placement: "bottom-end",
portal: !0,
style: t18,
tone: "default",
zOffset: 3e3
}, $[39] = t19) : t19 = $[39];
let t20;
return $[40] !== t15 ? (t20 = /* @__PURE__ */ jsx(MenuButton, { button: t8, id: "variants-nav-menu", onClose: handleMenuClose, menu: t15, popover: t19 }), $[40] = t15, $[41] = t20) : t20 = $[41], t20;
}
const VariantsNavContainer = /* @__PURE__ */ styled(Card).withConfig({
displayName: "VariantsNavContainer",
componentId: "sc-1bbf04-0"
})(["position:relative;display:flex;&:not([hidden]){display:flex;}align-items:center;gap:2px;padding:2px;margin:-3px 0;a:hover,button:hover{position:relative;z-index:2;}"]);
function VariantsNav() {
const $ = c(8), router = useRouter(), {
byId
} = useAllVariants();
let t0;
if ($[0] !== byId || $[1] !== router.stickyParams.variant) {
const selectedVariantDocumentId = decodeVariantIdFromRoute(router.stickyParams.variant ?? void 0);
t0 = selectedVariantDocumentId ? byId.get(selectedVariantDocumentId) : void 0, $[0] = byId, $[1] = router.stickyParams.variant, $[2] = t0;
} else
t0 = $[2];
const selectedVariant = t0;
let t1;
$[3] !== selectedVariant ? (t1 = /* @__PURE__ */ jsx(CurrentVariantLabel, { selectedVariant }), $[3] = selectedVariant, $[4] = t1) : t1 = $[4];
let t2;
$[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx(VariantsMenu, {}), $[5] = t2) : t2 = $[5];
let t3;
return $[6] !== t1 ? (t3 = /* @__PURE__ */ jsxs(VariantsNavContainer, { flex: "none", tone: "inherit", radius: "full", "data-ui": "VariantsNav", children: [
t1,
t2
] }), $[6] = t1, $[7] = t3) : t3 = $[7], t3;
}
const NavRowContainer = /* @__PURE__ */ styled(Card).withConfig({
displayName: "NavRowContainer",
componentId: "sc-t5zhvx-0"
})(["[data-ui='ReleasesNav'],[data-ui='VariantsNav']{margin:0;}"]);
function VariantsStudioNavbar(props) {
const $ = c(46), {
t
} = useTranslation(variantsLocaleNamespace), {
selectedPerspective
} = usePerspective(), router = useRouter(), hasVariantSelection = !!router.stickyParams.variant;
let t0;
$[0] !== selectedPerspective ? (t0 = !isDraftPerspective(selectedPerspective) && !isPublishedPerspective(selectedPerspective), $[0] = selectedPerspective, $[1] = t0) : t0 = $[1];
const canClear = hasVariantSelection || t0;
let t1;
$[2] !== router ? (t1 = () => {
router.navigate({
stickyParams: {
excludedPerspectives: null,
perspective: "",
variant: null
}
});
}, $[2] = router, $[3] = t1) : t1 = $[3];
const handleClearViewAs = t1;
let t2;
$[4] !== props ? (t2 = props.renderDefault(props), $[4] = props, $[5] = t2) : t2 = $[5];
let t3;
$[6] !== t ? (t3 = t("navbar.view-as"), $[6] = t, $[7] = t3) : t3 = $[7];
let t4;
$[8] !== t3 ? (t4 = /* @__PURE__ */ jsx(Text, { weight: "medium", size: 1, children: t3 }), $[8] = t3, $[9] = t4) : t4 = $[9];
let t5;
$[10] !== selectedPerspective ? (t5 = getReleaseTone(selectedPerspective), $[10] = selectedPerspective, $[11] = t5) : t5 = $[11];
let t6;
$[12] !== t ? (t6 = t("navbar.version"), $[12] = t, $[13] = t6) : t6 = $[13];
let t7;
$[14] !== t6 ? (t7 = /* @__PURE__ */ jsx(Card, { borderRight: !0, tone: "inherit", children: /* @__PURE__ */ jsx(Flex, { align: "center", paddingX: 2, height: "fill", children: /* @__PURE__ */ jsx(Text, { size: 1, children: t6 }) }) }), $[14] = t6, $[15] = t7) : t7 = $[15];
let t8;
$[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t8 = /* @__PURE__ */ jsx(ReleasesNav, { withReleasesToolButton: !0, border: !1 }), $[16] = t8) : t8 = $[16];
let t9;
$[17] !== t7 ? (t9 = /* @__PURE__ */ jsxs(Flex, { marginLeft: 1, children: [
t7,
t8
] }), $[17] = t7, $[18] = t9) : t9 = $[18];
let t10;
$[19] !== t5 || $[20] !== t9 ? (t10 = /* @__PURE__ */ jsx(NavRowContainer, { tone: t5, border: !0, radius: 4, paddingLeft: 1, children: t9 }), $[19] = t5, $[20] = t9, $[21] = t10) : t10 = $[21];
const t11 = hasVariantSelection ? "suggest" : "default";
let t12;
$[22] !== t ? (t12 = t("navbar.variant"), $[22] = t, $[23] = t12) : t12 = $[23];
let t13;
$[24] !== t12 ? (t13 = /* @__PURE__ */ jsx(Card, { borderRight: !0, tone: "inherit", children: /* @__PURE__ */ jsx(Flex, { align: "center", paddingX: 2, height: "fill", children: /* @__PURE__ */ jsx(Text, { size: 1, children: t12 }) }) }), $[24] = t12, $[25] = t13) : t13 = $[25];
let t14;
$[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsx(VariantsNav, {}), $[26] = t14) : t14 = $[26];
let t15;
$[27] !== t13 ? (t15 = /* @__PURE__ */ jsxs(Flex, { marginLeft: 1, children: [
t13,
t14
] }), $[27] = t13, $[28] = t15) : t15 = $[28];
let t16;
$[29] !== t11 || $[30] !== t15 ? (t16 = /* @__PURE__ */ jsx(NavRowContainer, { tone: t11, border: !0, radius: 4, paddingLeft: 1, children: t15 }), $[29] = t11, $[30] = t15, $[31] = t16) : t16 = $[31];
let t17;
$[32] !== canClear || $[33] !== handleClearViewAs || $[34] !== t ? (t17 = canClear && /* @__PURE__ */ jsx(motion.div, { animate: {
clipPath: "inset(0 0% 0 0%)",
opacity: 1
}, exit: {
clipPath: "inset(0 50% 0 50%)",
opacity: 0
}, initial: {
clipPath: "inset(0 50% 0 50%)",
opacity: 0
}, style: {
display: "flex"
}, transition: {
type: "spring",
bounce: 0,
duration: 0.3
}, children: /* @__PURE__ */ jsx(Button$1, { "data-testid": "view-as-clear-button", mode: "bleed", onClick: handleClearViewAs, text: t("navbar.clear") }) }, "view-as-clear-button"), $[32] = canClear, $[33] = handleClearViewAs, $[34] = t, $[35] = t17) : t17 = $[35];
let t18;
$[36] !== t17 ? (t18 = /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, children: t17 }), $[36] = t17, $[37] = t18) : t18 = $[37];
let t19;
$[38] !== t10 || $[39] !== t16 || $[40] !== t18 || $[41] !== t4 ? (t19 = /* @__PURE__ */ jsx(Card, { tone: "neutral", paddingY: 2, paddingX: 3, borderBottom: !0, children: /* @__PURE__ */ jsxs(Flex, { justify: "center", align: "center", gap: 2, children: [
t4,
t10,
t16,
t18
] }) }), $[38] = t10, $[39] = t16, $[40] = t18, $[41] = t4, $[42] = t19) : t19 = $[42];
let t20;
return $[43] !== t19 || $[44] !== t2 ? (t20 = /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
t2,
t19
] }), $[43] = t19, $[44] = t2, $[45] = t20) : t20 = $[45], t20;
}
export {
VariantsStudioNavbar
};
//# sourceMappingURL=VariantsStudioNavbar.js.map