@sanity/ui
Version:
The Sanity UI components.
1,458 lines (1,423 loc) • 227 kB
JavaScript
import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { c } from "react-compiler-runtime";
import { useState, useEffect, useDebugValue, useSyncExternalStore, createContext, useContext, forwardRef, useId, Children, isValidElement, cloneElement, useRef, useImperativeHandle, lazy, Suspense, memo, useMemo, useCallback, useLayoutEffect } from "react";
import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
import ReactIs, { isValidElementType } from "react-is";
import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon } from "@sanity/icons";
import { detectOverflow, autoPlacement, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
import { motion, AnimatePresence } from "framer-motion";
import { ResizeObserver } from "@juggle/resize-observer";
import { createPortal } from "react-dom";
import { useEffectEvent } from "use-effect-event";
const createColorTheme = createColorTheme$1, hexToRgb = hexToRgb$1, hslToRgb = hslToRgb$1, multiply = multiply$1, parseColor = parseColor$1, rgbToHex = rgbToHex$1, rgbToHsl = rgbToHsl$1, rgba = rgba$1, screen = screen$1, studioTheme = buildTheme(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_PROPS = {
card: {
initial: {
scale: 0.97,
willChange: "transform"
},
hidden: {
opacity: 0
},
visible: {
opacity: 1,
transition: {
when: "beforeChildren",
duration: 0.1
}
},
scaleIn: {
scale: 1
},
scaleOut: {
scale: 0.97
}
},
children: {
hidden: {
opacity: 0
},
visible: {
opacity: 1
}
},
transition: {
type: "spring",
visualDuration: 0.2,
bounce: 0.25
}
};
function _isEnterToClickElement(element) {
return isHTMLAnchorElement(element) || isHTMLButtonElement(element);
}
function isHTMLElement(node) {
return node instanceof Node && node.nodeType === Node.ELEMENT_NODE;
}
function isHTMLAnchorElement(element) {
return isHTMLElement(element) && element.nodeName === "A";
}
function isHTMLInputElement(element) {
return isHTMLElement(element) && element.nodeName === "INPUT";
}
function isHTMLButtonElement(element) {
return isHTMLElement(element) && element.nodeName === "BUTTON";
}
function isHTMLSelectElement(element) {
return isHTMLElement(element) && element.nodeName === "SELECT";
}
function isHTMLTextAreaElement(element) {
return isHTMLElement(element) && element.nodeName === "TEXTAREA";
}
function containsOrEqualsElement(element, node) {
return element.contains(node) || element === node;
}
function _isScrollable(el) {
if (!(el instanceof Element)) return !1;
const style = window.getComputedStyle(el);
return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
}
function _fillCSSObject(keys, value) {
return keys.reduce((style, key2) => (style[key2] = value, style), {});
}
function rem(pixelValue) {
return pixelValue === 0 ? 0 : `${pixelValue / 16}rem`;
}
function _responsive(media, values, callback) {
return (values?.map(callback) || []).map((statement, mediaIndex) => mediaIndex === 0 ? statement : {
[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement
});
}
function _getArrayProp(val, defaultVal) {
return val === void 0 ? defaultVal || EMPTY_ARRAY : Array.isArray(val) ? val : [val];
}
function _getResponsiveSpace(theme, props, spaceIndexes = EMPTY_ARRAY) {
if (!Array.isArray(spaceIndexes))
throw new Error("the property must be array of numbers");
if (spaceIndexes.length === 0)
return null;
const {
media,
space
} = getTheme_v2(theme);
return _responsive(media, spaceIndexes, (spaceIndex) => _fillCSSObject(props, rem(space[spaceIndex])));
}
function responsiveFont(fontKey, props) {
const {
$size,
$weight
} = props, {
font,
media
} = getTheme_v2(props.theme), {
family,
sizes,
weights
} = font[fontKey], fontWeight = $weight && weights[$weight] || weights.regular, defaultSize = sizes[2], base = {
position: "relative",
fontFamily: family,
fontWeight: `${fontWeight}`,
padding: "1px 0",
margin: 0,
"&:before": {
content: '""',
display: "block",
height: 0
},
"&:after": {
content: '""',
display: "block",
height: 0
},
"& > code, & > span": {
display: "block"
},
"&:not([hidden])": {
display: "block"
}
};
if (!$size)
return responsiveFont.warned || (console.warn("No size specified for responsive font", {
fontKey,
$size,
props,
base
}), responsiveFont.warned = !0), [base];
const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize));
return [base, ...resp];
}
function fontSize(size2) {
const {
ascenderHeight,
descenderHeight,
fontSize: fontSize2,
iconSize,
letterSpacing,
lineHeight
} = size2, negHeight = ascenderHeight + descenderHeight, capHeight = lineHeight - negHeight, iconOffset = (capHeight - iconSize) / 2, customIconSize = Math.floor(fontSize2 * 1.125 / 2) * 2 + 1, customIconOffset = (capHeight - customIconSize) / 2;
return {
fontSize: rem(fontSize2),
lineHeight: `calc(${lineHeight} / ${fontSize2})`,
letterSpacing: rem(letterSpacing),
transform: `translateY(${rem(descenderHeight)})`,
"&:before": {
marginTop: `calc(${rem(0 - negHeight)} - 1px)`
},
"&:after": {
marginBottom: "-1px"
},
"& svg:not([data-sanity-icon])": {
fontSize: `calc(${customIconSize} / 16 * 1rem)`,
margin: rem(customIconOffset)
},
"& [data-sanity-icon]": {
fontSize: `calc(${iconSize} / 16 * 1rem)`,
margin: rem(iconOffset)
}
};
}
function responsiveCodeFontStyle(props) {
return responsiveFont("code", props);
}
function responsiveHeadingFont(props) {
return responsiveFont("heading", props);
}
function responsiveLabelFont(props) {
return responsiveFont("label", props);
}
function responsiveTextAlignStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$align, (textAlign) => ({
textAlign
}));
}
function responsiveTextFont(props) {
return responsiveFont("text", props);
}
function useArrayProp(val, defaultVal) {
const $ = c(3);
let t0;
$[0] !== defaultVal || $[1] !== val ? (t0 = () => [_getArrayProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2];
const [t1, setCache] = useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
return hash !== cachedHash && setCache([_getArrayProp(val, defaultVal), hash]), cachedVal;
}
function useClickOutsideEvent(listener, t0, boundaryElement) {
const $ = c(9), elementsArg = t0 === void 0 ? _temp$9 : t0;
let t1;
$[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
if (!listener)
return;
const target = evt.target;
if (!(target instanceof Node))
return;
const resolvedBoundaryElement = boundaryElement?.();
if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
return;
const elements = elementsArg().flat();
for (const el of elements)
if (el && (target === el || el.contains(target)))
return;
listener(evt);
}, $[0] = boundaryElement, $[1] = elementsArg, $[2] = listener, $[3] = t1) : t1 = $[3];
const onEvent = useEffectEvent(t1), hasListener = !!listener;
let t2;
$[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
if (!hasListener)
return;
const handleEvent = (evt_0) => onEvent(evt_0);
return document.addEventListener("mousedown", handleEvent), () => {
document.removeEventListener("mousedown", handleEvent);
};
}, $[4] = hasListener, $[5] = onEvent, $[6] = t2) : t2 = $[6];
let t3;
$[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
}
function _temp$9() {
return EMPTY_ARRAY;
}
function useCustomValidity(ref, customValidity) {
const $ = c(6);
let t0;
$[0] !== customValidity || $[1] !== ref.current ? (t0 = () => {
ref.current?.setCustomValidity(customValidity || "");
}, $[0] = customValidity, $[1] = ref.current, $[2] = t0) : t0 = $[2];
let t1;
$[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], useEffect(t0, t1);
}
const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
function _createElementRectValueListener() {
return {
subscribe(element, subscriber) {
const resizeObserver = new _ResizeObserver(([entry]) => {
subscriber({
_contentRect: entry.contentRect,
border: {
width: entry.borderBoxSize[0].inlineSize,
height: entry.borderBoxSize[0].blockSize
},
content: {
width: entry.contentRect.width,
height: entry.contentRect.height
}
});
});
return resizeObserver.observe(element), () => {
resizeObserver.unobserve(element), resizeObserver.disconnect();
};
}
};
}
function _createElementSizeObserver() {
const disposeCache = /* @__PURE__ */ new WeakMap(), subscribersCache = /* @__PURE__ */ new WeakMap();
return {
subscribe(element, subscriber) {
const subscribers = subscribersCache.get(element) || [];
let dispose = disposeCache.get(element);
return subscribersCache.has(element) || (subscribersCache.set(element, subscribers), dispose = _createElementRectValueListener().subscribe(element, (elementRect) => {
for (const sub of subscribers)
sub(elementRect);
})), subscribers.push(subscriber), () => {
const idx = subscribers.indexOf(subscriber);
idx > -1 && subscribers.splice(idx, 1), subscribers.length === 0 && dispose && dispose();
};
}
};
}
function useElementSize(element) {
const $ = c(3), [size2, setSize] = useState(null);
let t0, t1;
return $[0] !== element ? (t0 = () => {
if (element)
return _elementSizeObserver.subscribe(element, setSize);
}, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1), size2;
}
function useGlobalKeyDown(onKeyDown) {
const $ = c(5);
let t0;
$[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
const handleKeyDown = useEffectEvent(t0);
let t1;
$[2] !== handleKeyDown ? (t1 = () => {
const handler = (event_0) => handleKeyDown(event_0);
return window.addEventListener("keydown", handler), () => window.removeEventListener("keydown", handler);
}, $[2] = handleKeyDown, $[3] = t1) : t1 = $[3];
let t2;
$[4] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[4] = t2) : t2 = $[4], useEffect(t1, t2);
}
function useMatchMedia(mediaQueryString, getServerSnapshot2) {
const $ = c(4);
useDebugValue(mediaQueryString);
let t0;
$[0] !== mediaQueryString ? (t0 = (onStoreChange) => {
const media = window.matchMedia(mediaQueryString);
return media.addEventListener("change", onStoreChange), () => media.removeEventListener("change", onStoreChange);
}, $[0] = mediaQueryString, $[1] = t0) : t0 = $[1];
let t1;
return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], useSyncExternalStore(t0, t1, getServerSnapshot2);
}
function getGlobalScope() {
if (typeof globalThis < "u") return globalThis;
if (typeof window < "u") return window;
if (typeof self < "u") return self;
if (typeof global < "u") return global;
throw new Error("@sanity/ui: could not locate global scope");
}
const globalScope = getGlobalScope();
function createGlobalScopedContext(key2, defaultValue) {
const symbol = Symbol.for(key2);
return typeof document > "u" ? createContext(defaultValue) : (globalScope[symbol] = globalScope[symbol] || createContext(defaultValue), globalScope[symbol]);
}
const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
function ThemeProvider(props) {
const $ = c(15), parentTheme = useContext(ThemeContext), {
children
} = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default");
let t0;
bb0: {
if (!rootTheme) {
t0 = null;
break bb0;
}
let t12;
$[0] !== rootTheme || $[1] !== scheme || $[2] !== tone ? (t12 = {
version: 0,
theme: rootTheme,
scheme,
tone
}, $[0] = rootTheme, $[1] = scheme, $[2] = tone, $[3] = t12) : t12 = $[3], t0 = t12;
}
const themeContext = t0;
let t1;
bb1: {
if (!rootTheme) {
t1 = null;
break bb1;
}
let t22;
$[4] !== rootTheme || $[5] !== scheme || $[6] !== tone ? (t22 = getScopedTheme(rootTheme, scheme, tone), $[4] = rootTheme, $[5] = scheme, $[6] = tone, $[7] = t22) : t22 = $[7], t1 = t22;
}
const theme = t1;
if (!theme) {
let t22;
return $[8] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsx("pre", { children: 'ThemeProvider: no "theme" property provided' }), $[8] = t22) : t22 = $[8], t22;
}
let t2;
$[9] !== children || $[10] !== theme ? (t2 = /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children }), $[9] = children, $[10] = theme, $[11] = t2) : t2 = $[11];
let t3;
return $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContext, children: t2 }), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14], t3;
}
ThemeProvider.displayName = "ThemeProvider";
function useRootTheme() {
const value = useContext(ThemeContext);
if (!value)
throw new Error("useRootTheme(): missing context value");
return value;
}
function ThemeColorProvider(props) {
const $ = c(5), {
children,
scheme,
tone
} = props, root = useRootTheme(), t0 = scheme || root.scheme;
let t1;
return $[0] !== children || $[1] !== root.theme || $[2] !== t0 || $[3] !== tone ? (t1 = /* @__PURE__ */ jsx(ThemeProvider, { scheme: t0, theme: root.theme, tone, children }), $[0] = children, $[1] = root.theme, $[2] = t0, $[3] = tone, $[4] = t1) : t1 = $[4], t1;
}
ThemeColorProvider.displayName = "ThemeColorProvider";
function useTheme() {
return useTheme$1();
}
function useTheme_v2() {
const $ = c(2), t0 = useTheme$1();
let t1;
return $[0] !== t0 ? (t1 = getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
}
function _getMediaQuery(media, index) {
return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
}
function _createMediaStore(media) {
const mediaLen = media.length;
let sizes;
const getSizes = () => {
if (!sizes) {
sizes = [];
for (let index = mediaLen; index > -1; index -= 1) {
const mediaQuery = _getMediaQuery(media, index);
sizes.push({
index,
mq: window.matchMedia(mediaQuery)
});
}
}
return sizes;
};
return {
getSnapshot: () => {
for (const {
index,
mq
} of getSizes())
if (mq.matches) return index;
return 0;
},
subscribe: (onStoreChange) => {
const disposeFns = [];
for (const {
mq
} of getSizes()) {
const handleChange = () => {
mq.matches && onStoreChange();
};
mq.addEventListener("change", handleChange), disposeFns.push(() => mq.removeEventListener("change", handleChange));
}
return () => {
for (const disposeFn of disposeFns)
disposeFn();
};
}
};
}
function getServerSnapshot() {
return 0;
}
function useMediaIndex() {
const $ = c(2), {
media
} = useTheme_v2();
let t0, t1;
$[0] !== media ? (t1 = _createMediaStore(media), $[0] = media, $[1] = t1) : t1 = $[1], t0 = t1;
const store = t0;
return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
}
function usePrefersDark(t0) {
return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$8 : t0);
}
function _temp$8() {
return !1;
}
function usePrefersReducedMotion(t0) {
return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$7 : t0);
}
function _temp$7() {
return !1;
}
function responsiveBorderStyle() {
return [border, borderTop, borderRight, borderBottom, borderLeft];
}
function border(props) {
const {
card,
media
} = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
return _responsive(media, props.$border, (value) => value ? {
"&&": {
border: borderStyle
}
} : {
"&&": {
border: 0
}
});
}
function borderTop(props) {
const {
card,
media
} = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
return _responsive(media, props.$borderTop, (value) => value ? {
"&&": {
borderTop: borderStyle
}
} : {
"&&": {
borderTop: 0
}
});
}
function borderRight(props) {
const {
card,
media
} = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
return _responsive(media, props.$borderRight, (value) => value ? {
"&&": {
borderRight: borderStyle
}
} : {
"&&": {
borderRight: 0
}
});
}
function borderBottom(props) {
const {
card,
media
} = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
return _responsive(media, props.$borderBottom, (value) => value ? {
"&&": {
borderBottom: borderStyle
}
} : {
"&&": {
borderBottom: 0
}
});
}
function borderLeft(props) {
const {
card,
media
} = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
return _responsive(media, props.$borderLeft, (value) => value ? {
"&&": {
borderLeft: borderStyle
}
} : {
"&&": {
borderLeft: 0
}
});
}
const BASE_STYLE$4 = {
'&[data-as="ul"],&[data-as="ol"]': {
listStyle: "none"
}
}, BOX_SIZING = {
content: "content-box",
border: "border-box"
}, BOX_HEIGHT = {
stretch: "stretch",
fill: "100%"
};
function boxStyle() {
return BASE_STYLE$4;
}
function responsiveBoxStyle() {
return [responsiveBoxSizingStyle, responsiveBoxHeightStyle, responsiveBoxOverflowStyle, responsiveBoxDisplayStyle];
}
function responsiveBoxDisplayStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$display, (display) => ({
"&:not([hidden])": {
display
}
}));
}
function responsiveBoxSizingStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$sizing, (sizing) => ({
boxSizing: BOX_SIZING[sizing]
}));
}
function responsiveBoxHeightStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$height, (height) => ({
height: BOX_HEIGHT[height]
}));
}
function responsiveBoxOverflowStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$overflow, (overflow) => ({
overflow
}));
}
const BASE_STYLE$3 = {
minWidth: 0,
minHeight: 0
};
function flexItemStyle() {
return [BASE_STYLE$3, responsiveFlexItemStyle];
}
function responsiveFlexItemStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return props.$flex ? _responsive(media, props.$flex, (flex) => ({
flex: `${flex}`
})) : EMPTY_ARRAY;
}
const BASE_STYLE$2 = {
"&&:not([hidden])": {
display: "flex"
}
};
function responsiveFlexStyle() {
return [BASE_STYLE$2, responsiveFlexAlignStyle, responsiveFlexGapStyle, responsiveFlexWrapStyle, responsiveFlexJustifyStyle, responsiveFlexDirectionStyle];
}
function responsiveFlexAlignStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$align, (align) => ({
alignItems: align
}));
}
function responsiveFlexGapStyle(props) {
const {
media,
space
} = getTheme_v2(props.theme);
return _responsive(media, props.$gap, (gap) => ({
gap: gap ? rem(space[gap]) : void 0
}));
}
function responsiveFlexWrapStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$wrap, (wrap) => ({
flexWrap: wrap
}));
}
function responsiveFlexJustifyStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$justify, (justify) => ({
justifyContent: justify
}));
}
function responsiveFlexDirectionStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$direction, (direction) => ({
flexDirection: direction
}));
}
function focusRingBorderStyle(border2) {
return `inset 0 0 0 ${border2.width}px ${border2.color}`;
}
function focusRingStyle(opts) {
const {
base,
border: border2,
focusRing
} = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
return [focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`, border2 && focusRingBorderStyle(border2), focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`, focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`].filter(Boolean).join(",");
}
function responsiveGridItemStyle() {
return [responsiveGridItemRowStyle, responsiveGridItemRowStartStyle, responsiveGridItemRowEndStyle, responsiveGridItemColumnStyle, responsiveGridItemColumnStartStyle, responsiveGridItemColumnEndStyle];
}
const GRID_ITEM_ROW = {
auto: "auto",
full: "1 / -1"
}, GRID_ITEM_COLUMN = {
auto: "auto",
full: "1 / -1"
};
function responsiveGridItemRowStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$row, (row) => typeof row == "number" ? {
gridRow: `span ${row} / span ${row}`
} : {
gridRow: GRID_ITEM_ROW[row]
});
}
function responsiveGridItemRowStartStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$rowStart, (rowStart) => ({
gridRowStart: `${rowStart}`
}));
}
function responsiveGridItemRowEndStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$rowEnd, (rowEnd) => ({
gridRowEnd: `${rowEnd}`
}));
}
function responsiveGridItemColumnStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$column, (column) => typeof column == "number" ? {
gridColumn: `span ${column} / span ${column}`
} : {
gridColumn: GRID_ITEM_COLUMN[column]
});
}
function responsiveGridItemColumnStartStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$columnStart, (columnStart) => ({
gridColumnStart: `${columnStart}`
}));
}
function responsiveGridItemColumnEndStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$columnEnd, (columnEnd) => ({
gridColumnEnd: `${columnEnd}`
}));
}
const GRID_CSS = {
"&&:not([hidden])": {
display: "grid"
},
'&[data-as="ul"],&[data-as="ol"]': {
listStyle: "none"
}
}, GRID_AUTO_COLUMS = {
auto: "auto",
min: "min-content",
max: "max-content",
fr: "minmax(0, 1fr)"
}, GRID_AUTO_ROWS = {
auto: "auto",
min: "min-content",
max: "max-content",
fr: "minmax(0, 1fr)"
};
function responsiveGridStyle() {
return [GRID_CSS, responsiveGridAutoFlowStyle, responsiveGridAutoRowsStyle, responsiveGridAutoColsStyle, responsiveGridColumnsStyle, responsiveGridRowsStyle, responsiveGridGapStyle, responsiveGridGapXStyle, responsiveGridGapYStyle];
}
function responsiveGridAutoFlowStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$autoFlow, (autoFlow) => ({
gridAutoFlow: autoFlow
}));
}
function responsiveGridAutoRowsStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$autoRows, (autoRows) => ({
gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows]
}));
}
function responsiveGridAutoColsStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$autoCols, (autoCols) => ({
gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols]
}));
}
function responsiveGridColumnsStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$columns, (columns) => ({
gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`
}));
}
function responsiveGridRowsStyle(props) {
const {
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$rows, (rows) => ({
gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`
}));
}
function responsiveGridGapStyle(props) {
const {
media,
space
} = getTheme_v2(props.theme);
return _responsive(media, props.$gap, (gap) => ({
gridGap: gap ? rem(space[gap]) : void 0
}));
}
function responsiveGridGapXStyle(props) {
const {
media,
space
} = getTheme_v2(props.theme);
return _responsive(media, props.$gapX, (gapX) => ({
columnGap: gapX ? rem(space[gapX]) : void 0
}));
}
function responsiveGridGapYStyle(props) {
const {
media,
space
} = getTheme_v2(props.theme);
return _responsive(media, props.$gapY, (gapY) => ({
rowGap: gapY ? rem(space[gapY]) : void 0
}));
}
function responsiveInputPaddingStyle(props) {
const {
$fontSize,
$iconLeft,
$iconRight,
$padding,
$space
} = props, {
font,
media,
space
} = getTheme_v2(props.theme), len = Math.max($padding.length, $space.length, $fontSize.length), _padding = [], _space = [], _fontSize = [];
for (let i = 0; i < len; i += 1)
_fontSize[i] = $fontSize[i] === void 0 ? _fontSize[i - 1] : $fontSize[i], _padding[i] = $padding[i] === void 0 ? _padding[i - 1] : $padding[i], _space[i] = $space[i] === void 0 ? _space[i - 1] : $space[i];
return _responsive(media, _padding, (_, i) => {
const size2 = font.text.sizes[_fontSize[i]] || font.text.sizes[2], emSize = size2.lineHeight - size2.ascenderHeight - size2.descenderHeight, p = space[_padding[i]], s = space[_space[i]], styles = {
paddingTop: rem(p - size2.ascenderHeight),
paddingRight: rem(p),
paddingBottom: rem(p - size2.descenderHeight),
paddingLeft: rem(p)
};
return $iconRight && (styles.paddingRight = rem(p + emSize + s)), $iconLeft && (styles.paddingLeft = rem(p + emSize + s)), styles;
});
}
function responsiveInputPaddingIconRightStyle(props) {
return responsiveInputPaddingStyle({
...props,
$iconRight: !0
});
}
const ROOT_STYLE = css`
&:not([hidden]) {
display: flex;
}
align-items: center;
`;
function textInputRootStyle() {
return ROOT_STYLE;
}
function textInputBaseStyle(props) {
const {
$scheme,
$tone,
$weight
} = props, {
color,
font
} = getTheme_v2(props.theme);
return css`
appearance: none;
background: none;
border: 0;
border-radius: 0;
outline: none;
width: 100%;
box-sizing: border-box;
font-family: ${font.text.family};
font-weight: ${$weight && font.text.weights[$weight] || font.text.weights.regular};
margin: 0;
position: relative;
z-index: 1;
display: block;
/* NOTE: This is a hack to disable Chrome’s autofill styles */
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-text-fill-color: var(--input-fg-color) !important;
transition: background-color 5000s;
transition-delay: 86400s /* 24h */;
}
/* &:is(textarea) */
&[data-as='textarea'] {
resize: none;
}
color: var(--input-fg-color);
&::placeholder {
color: var(--input-placeholder-color);
}
&[data-scheme='${$scheme}'][data-tone='${$tone}'] {
--input-fg-color: ${color.input.default.enabled.fg};
--input-placeholder-color: ${color.input.default.enabled.placeholder};
/* enabled */
&:not(:invalid):not(:disabled):not(:read-only) {
--input-fg-color: ${color.input.default.enabled.fg};
--input-placeholder-color: ${color.input.default.enabled.placeholder};
}
/* disabled */
&:not(:invalid):disabled {
--input-fg-color: ${color.input.default.disabled.fg};
--input-placeholder-color: ${color.input.default.disabled.placeholder};
}
/* invalid */
&:invalid {
--input-fg-color: ${color.input.invalid.enabled.fg};
--input-placeholder-color: ${color.input.invalid.enabled.placeholder};
}
/* readOnly */
&:read-only {
--input-fg-color: ${color.input.default.readOnly.fg};
--input-placeholder-color: ${color.input.default.readOnly.placeholder};
}
}
`;
}
function textInputFontSizeStyle(props) {
const {
font,
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$fontSize, (sizeIndex) => {
const size2 = font.text.sizes[sizeIndex] || font.text.sizes[2];
return {
fontSize: rem(size2.fontSize),
lineHeight: `${size2.lineHeight / size2.fontSize}`
};
});
}
function textInputRepresentationStyle(props) {
const {
$hasPrefix,
$hasSuffix,
$scheme,
$tone,
$unstableDisableFocusRing
} = props, {
color,
input
} = getTheme_v2(props.theme);
return css`
--input-box-shadow: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
pointer-events: none;
z-index: 0;
background-color: var(--card-bg-color);
box-shadow: var(--input-box-shadow);
border-top-left-radius: ${$hasPrefix ? 0 : void 0};
border-bottom-left-radius: ${$hasPrefix ? 0 : void 0};
border-top-right-radius: ${$hasSuffix ? 0 : void 0};
border-bottom-right-radius: ${$hasSuffix ? 0 : void 0};
&[data-scheme='${$scheme}'][data-tone='${$tone}'] {
--card-bg-color: ${color.input.default.enabled.bg};
--card-fg-color: ${color.input.default.enabled.fg};
/* enabled */
*:not(:disabled) + &[data-border] {
--input-box-shadow: ${focusRingBorderStyle({
color: color.input.default.enabled.border,
width: input.border.width
})};
}
/* invalid */
*:not(:disabled):invalid + & {
--card-bg-color: ${color.input.invalid.enabled.bg};
--card-fg-color: ${color.input.invalid.enabled.fg};
&[data-border] {
--input-box-shadow: ${focusRingBorderStyle({
color: color.input.invalid.enabled.border,
width: input.border.width
})};
}
}
/* focused */
*:not(:disabled):focus + & {
&[data-border] {
--input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({
border: {
color: color.input.default.enabled.border,
width: input.border.width
},
focusRing: input.text.focusRing
})};
}
&:not([data-border]) {
--input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({
focusRing: input.text.focusRing
})};
}
}
/* disabled */
*:not(:invalid):disabled + & {
--card-bg-color: ${color.input.default.disabled.bg} !important;
--card-fg-color: ${color.input.default.disabled.fg} !important;
--card-icon-color: ${color.input.default.disabled.fg} !important;
&[data-border] {
--input-box-shadow: ${focusRingBorderStyle({
color: color.input.default.disabled.border,
width: input.border.width
})};
}
}
*:invalid:disabled + & {
--card-bg-color: ${color.input.invalid.disabled.bg} !important;
--card-fg-color: ${color.input.invalid.disabled.fg} !important;
--card-icon-color: ${color.input.invalid.disabled.fg} !important;
&[data-border] {
--input-box-shadow: ${focusRingBorderStyle({
color: color.input.invalid.disabled.border,
width: input.border.width
})};
}
}
/* readOnly */
*:not(:invalid):read-only + & {
--card-bg-color: ${color.input.default.readOnly.bg} !important;
--card-fg-color: ${color.input.default.readOnly.fg} !important;
}
*:invalid:read-only + & {
--card-bg-color: ${color.input.invalid.readOnly.bg} !important;
--card-fg-color: ${color.input.invalid.readOnly.fg} !important;
}
/* hovered */
@media (hover: hover) {
*:not(:disabled):not(:read-only):not(:invalid):hover + & {
--card-bg-color: ${color.input.default.hovered.bg};
--card-fg-color: ${color.input.default.hovered.fg};
}
*:invalid:not(:disabled):not(:read-only):hover + & {
--card-bg-color: ${color.input.invalid.hovered.bg};
--card-fg-color: ${color.input.invalid.hovered.fg};
}
*:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
--input-box-shadow: ${focusRingBorderStyle({
color: color.input.default.hovered.border,
width: input.border.width
})};
}
*:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
--input-box-shadow: ${focusRingBorderStyle({
color: color.input.invalid.hovered.border,
width: input.border.width
})};
}
}
}
`;
}
function responsiveMarginStyle(props) {
const {
theme
} = props;
return [_getResponsiveSpace(theme, ["margin"], props.$margin), _getResponsiveSpace(theme, ["marginLeft", "marginRight"], props.$marginX), _getResponsiveSpace(theme, ["marginTop", "marginBottom"], props.$marginY), _getResponsiveSpace(theme, ["marginTop"], props.$marginTop), _getResponsiveSpace(theme, ["marginRight"], props.$marginRight), _getResponsiveSpace(theme, ["marginBottom"], props.$marginBottom), _getResponsiveSpace(theme, ["marginLeft"], props.$marginLeft)].filter(Boolean);
}
function responsivePaddingStyle(props) {
const {
theme
} = props;
return [_getResponsiveSpace(theme, ["padding"], props.$padding), _getResponsiveSpace(theme, ["paddingLeft", "paddingRight"], props.$paddingX), _getResponsiveSpace(theme, ["paddingTop", "paddingBottom"], props.$paddingY), _getResponsiveSpace(theme, ["paddingTop"], props.$paddingTop), _getResponsiveSpace(theme, ["paddingRight"], props.$paddingRight), _getResponsiveSpace(theme, ["paddingBottom"], props.$paddingBottom), _getResponsiveSpace(theme, ["paddingLeft"], props.$paddingLeft)].filter(Boolean);
}
function responsiveRadiusStyle(props) {
const {
media,
radius
} = getTheme_v2(props.theme);
return _responsive(media, props.$radius, (value) => {
let borderRadius = 0;
return typeof value == "number" && (borderRadius = rem(radius[value])), value === "full" && (borderRadius = "9999px"), {
borderRadius
};
});
}
function toBoxShadow(shadow, color) {
return `${shadow.map(rem).join(" ")} ${color}`;
}
function shadowStyle(shadow, outlineWidth = 1) {
if (!shadow) return EMPTY_RECORD;
const outline = `0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`, umbra = toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)"), penumbra = toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)"), ambient = toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)");
return {
boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`
};
}
function responsiveShadowStyle(props) {
const {
card,
media,
shadow
} = getTheme_v2(props.theme);
return _responsive(media, props.$shadow, (index) => shadowStyle(shadow[index], card.shadow.outline));
}
const SpanWithTextOverflow = styled.span.withConfig({
displayName: "SpanWithTextOverflow",
componentId: "sc-ol2i3b-0"
})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`;
function labelBaseStyle(props) {
const {
$accent,
$muted
} = props, {
font
} = getTheme_v2(props.theme);
return css`
text-transform: uppercase;
${$accent && css`
color: var(--card-accent-fg-color);
`}
${$muted && css`
color: var(--card-muted-fg-color);
`}
& code {
font-family: ${font.code.family};
border-radius: 1px;
}
& a {
text-decoration: none;
border-radius: 1px;
}
& svg {
/* Certain popular CSS libraries changes the defaults for SVG display */
/* Make sure SVGs are rendered as inline elements */
display: inline;
}
& [data-sanity-icon] {
vertical-align: baseline;
}
`;
}
const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
displayName: "StyledLabel",
componentId: "sc-1luap7z-0"
})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), Label = forwardRef(function(props, ref) {
const $ = c(22);
let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
$[0] !== props ? ({
accent,
align,
children: childrenProp,
muted: t0,
size: t1,
textOverflow,
weight,
...restProps
} = props, $[0] = props, $[1] = accent, $[2] = align, $[3] = childrenProp, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = textOverflow, $[8] = weight) : (accent = $[1], align = $[2], childrenProp = $[3], restProps = $[4], t0 = $[5], t1 = $[6], textOverflow = $[7], weight = $[8]);
const muted = t0 === void 0 ? !1 : t0, size2 = t1 === void 0 ? 2 : t1;
let children = childrenProp;
if (textOverflow === "ellipsis") {
let t22;
$[9] !== children ? (t22 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t22) : t22 = $[10], children = t22;
} else {
let t22;
$[11] !== children ? (t22 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t22) : t22 = $[12], children = t22;
}
const t2 = useArrayProp(align), t3 = useArrayProp(size2);
let t4;
return $[13] !== accent || $[14] !== children || $[15] !== muted || $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== weight ? (t4 = /* @__PURE__ */ jsx(StyledLabel, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[13] = accent, $[14] = children, $[15] = muted, $[16] = ref, $[17] = restProps, $[18] = t2, $[19] = t3, $[20] = weight, $[21] = t4) : t4 = $[21], t4;
});
Label.displayName = "ForwardRef(Label)";
const avatarStyle = {
root: avatarRootStyle,
arrow: avatarArrowStyle,
bgStroke: avatarBgStrokeStyle,
stroke: avatarStrokeStyle,
initials: avatarInitialsStyle,
image: avatarImageStyle
};
function avatarArrowStyle() {
return {
position: "absolute",
boxSizing: "border-box",
zIndex: "0",
opacity: "0",
transition: "all 0.2s linear",
transform: "rotate(-90deg) translate3d(0, 6px, 0)",
left: 0,
right: 0,
top: 0,
bottom: 0,
"& > svg": {
width: "11px",
height: "7px",
position: "absolute",
top: "-5px",
left: "50%",
transform: "translateX(-6px)",
"&:not([hidden])": {
display: "block"
}
},
"[data-arrow-position='inside'] > &": {
transform: "rotate(-90deg) translate3d(0, 6px, 0)",
opacity: "0"
},
"[data-arrow-position='top'] > &": {
opacity: "1",
transform: "rotate(0deg)"
},
"[data-arrow-position='bottom'] > &": {
opacity: "1",
transform: "rotate(-180deg)"
}
};
}
function avatarRootStyle(props) {
const {
$color
} = props, {
avatar
} = getTheme_v2(props.theme);
return {
"--avatar-bg-color": `var(--card-avatar-${$color}-bg-color)`,
"--avatar-fg-color": `var(--card-avatar-${$color}-fg-color)`,
backgroundColor: "var(--avatar-bg-color)",
position: "relative",
boxSizing: "border-box",
userSelect: "none",
boxShadow: "0 0 0 1px var(--card-bg-color)",
'&[data-status="inactive"]': {
opacity: "0.5"
},
"&>svg": {
"&:not([hidden])": {
display: "block"
}
},
/* &:is(button) */
'&[data-as="button"]': {
WebkitFontSmoothing: "inherit",
appearance: "none",
margin: 0,
padding: 0,
border: 0,
font: "inherit",
color: "inherit",
outline: "none",
"&:focus": {
boxShadow: focusRingStyle({
focusRing: avatar.focusRing
})
},
"&:focus:not(:focus-visible)": {
boxShadow: "none"
}
}
};
}
function responsiveAvatarSizeStyle(props) {
const {
avatar,
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$size, (size2) => {
const avatarSize = avatar.sizes[size2] || avatar.sizes[0];
return {
width: rem(avatarSize.size),
height: rem(avatarSize.size),
borderRadius: rem(avatarSize.size / 2),
"&>svg": {
width: rem(avatarSize.size),
height: rem(avatarSize.size),
borderRadius: rem(avatarSize.size / 2)
}
};
});
}
function avatarImageStyle() {
return {
position: "relative"
};
}
function avatarInitialsStyle() {
return {
width: "100%",
height: "100%",
color: "var(--avatar-fg-color)",
alignItems: "center",
justifyContent: "center",
textTransform: "uppercase",
textAlign: "center",
borderRadius: "50%",
"&:not([hidden])": {
display: "flex"
}
};
}
function avatarBgStrokeStyle() {
return {
strokeWidth: "4px",
stroke: "var(--card-bg-color)"
};
}
function avatarStrokeStyle() {
return {
strokeWidth: "2px",
stroke: "var(--avatar-bg-color)",
'[data-status="editing"] &': {
strokeDasharray: "2 4",
strokeLinecap: "round"
}
};
}
const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
displayName: "StyledAvatar",
componentId: "sc-1rj7kl0-0"
})(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = /* @__PURE__ */ styled.div.withConfig({
displayName: "Arrow",
componentId: "sc-1rj7kl0-1"
})(avatarStyle.arrow), BgStroke = /* @__PURE__ */ styled.ellipse.withConfig({
displayName: "BgStroke",
componentId: "sc-1rj7kl0-2"
})(avatarStyle.bgStroke), Stroke = /* @__PURE__ */ styled.ellipse.withConfig({
displayName: "Stroke",
componentId: "sc-1rj7kl0-3"
})(avatarStyle.stroke), Initials = /* @__PURE__ */ styled.div.withConfig({
displayName: "Initials",
componentId: "sc-1rj7kl0-4"
})(avatarStyle.initials), InitialsLabel = /* @__PURE__ */ styled(Label).withConfig({
displayName: "InitialsLabel",
componentId: "sc-1rj7kl0-5"
})({
color: "inherit"
}), AvatarImage = /* @__PURE__ */ styled.svg.withConfig({
displayName: "AvatarImage",
componentId: "sc-1rj7kl0-6"
})(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
const $ = c(52);
let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
$[0] !== props ? ({
__unstable_hideInnerStroke,
as: asProp,
color: t0,
src,
title,
initials,
onImageLoadError,
arrowPosition: arrowPositionProp,
animateArrowFrom,
status: t1,
size: t2,
...restProps
} = props, $[0] = props, $[1] = __unstable_hideInnerStroke, $[2] = animateArrowFrom, $[3] = arrowPositionProp, $[4] = asProp, $[5] = initials, $[6] = onImageLoadError, $[7] = restProps, $[8] = src, $[9] = t0, $[10] = t1, $[11] = t2, $[12] = title) : (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], asProp = $[4], initials = $[5], onImageLoadError = $[6], restProps = $[7], src = $[8], t0 = $[9], t1 = $[10], t2 = $[11], title = $[12]);
const color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, {
avatar
} = useTheme_v2(), as = ReactIs.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`;
let t3, t4;
$[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
if (arrowPosition === arrowPositionProp)
return;
const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
return () => cancelAnimationFrame(raf);
}, t4 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t3, $[16] = t4) : (t3 = $[15], t4 = $[16]), useEffect(t3, t4);
let t5, t6;
$[17] !== src ? (t5 = () => {
src && setImageFailed(!1);
}, t6 = [src], $[17] = src, $[18] = t5, $[19] = t6) : (t5 = $[18], t6 = $[19]), useEffect(t5, t6);
let t7;
$[20] !== onImageLoadError ? (t7 = () => {
setImageFailed(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
}, $[20] = onImageLoadError, $[21] = t7) : t7 = $[21];
const handleImageError = t7;
let t8, t9;
$[22] !== size2 ? (t9 = size2.map(_temp$6), $[22] = size2, $[23] = t9) : t9 = $[23], t8 = t9;
const initialsSize = t8, t10 = typeof as == "string" ? as : void 0;
let t11;
$[24] !== color ? (t11 = /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[24] = color, $[25] = t11) : t11 = $[25];
let t12;
$[26] !== __unstable_hideInnerStroke || $[27] !== _radius || $[28] !== _sizeRem || $[29] !== handleImageError || $[30] !== imageFailed || $[31] !== imageId || $[32] !== src ? (t12 = !imageFailed && src && /* @__PURE__ */ jsxs(AvatarImage, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
/* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
!__unstable_hideInnerStroke && /* @__PURE__ */ jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
/* @__PURE__ */ jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
] }), $[26] = __unstable_hideInnerStroke, $[27] = _radius, $[28] = _sizeRem, $[29] = handleImageError, $[30] = imageFailed, $[31] = imageId, $[32] = src, $[33] = t12) : t12 = $[33];
let t13;
$[34] !== imageFailed || $[35] !== initials || $[36] !== initialsSize || $[37] !== src ? (t13 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[34] = imageFailed, $[35] = initials, $[36] = initialsSize, $[37] = src, $[38] = t13) : t13 = $[38];
let t14;
return $[39] !== arrowPosition || $[40] !== as || $[41] !== color || $[42] !== ref || $[43] !== restProps || $[44] !== size2 || $[45] !== status || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t13 || $[50] !== title ? (t14 = /* @__PURE__ */ jsxs(StyledAvatar, { as, "data-as": t10, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
t11,
t12,
t13
] }), $[39] = arrowPosition, $[40] = as, $[41] = color, $[42] = ref, $[43] = restProps, $[44] = size2, $[45] = status, $[46] = t10, $[47] = t11, $[48] = t12, $[49] = t13, $[50] = title, $[51] = t14) : t14 = $[51], t14;
});
Avatar.displayName = "ForwardRef(Avatar)";
function _temp$6(s) {
return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
}
function _responsiveAvatarCounterSizeStyle(props) {
const {
avatar,
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$size, (size2) => {
const avatarSize = avatar.sizes[size2];
return avatarSize ? {
borderRadius: rem(avatarSize.size / 2),
minWidth: rem(avatarSize.size),
height: rem(avatarSize.size)
} : EMPTY_RECORD;
});
}
function _avatarCounterBaseStyle(props) {
const {
space
} = getTheme_v2(props.theme);
return css`
align-items: center;
justify-content: center;
box-sizing: border-box;
user-select: none;
color: inherit;
color: var(--card-fg-color);
background: var(--card-bg-color);
box-shadow:
0 0 0 1px var(--card-bg-color),
inset 0 0 0 1px var(--card-hairline-hard-colo