@sanity/ui
Version:
The Sanity UI components.
1,409 lines (1,371 loc) • 253 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, Fragment, jsxs } from "react/jsx-runtime";
import { c } from "react-compiler-runtime";
import { createContext, useContext, forwardRef, useId, useState, useEffect, Children, isValidElement, cloneElement, useDebugValue, useSyncExternalStore, useRef, useImperativeHandle, lazy, Suspense, 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, useFloating, autoPlacement, flip, offset, shift, arrow, hide, 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 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);
if (typeof document > "u") {
const context = createContext(defaultValue);
return context.displayName = key2, context;
}
return 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 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(26);
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;
}
let t2;
$[13] !== align ? (t2 = _getArrayProp(align), $[13] = align, $[14] = t2) : t2 = $[14];
let t3;
$[15] !== size2 ? (t3 = _getArrayProp(size2), $[15] = size2, $[16] = t3) : t3 = $[16];
let t4;
return $[17] !== accent || $[18] !== children || $[19] !== muted || $[20] !== ref || $[21] !== restProps || $[22] !== t2 || $[23] !== t3 || $[24] !== weight ? (t4 = /* @__PURE__ */ jsx(StyledLabel, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[17] = accent, $[18] = children, $[19] = muted, $[20] = ref, $[21] = restProps, $[22] = t2, $[23] = t3, $[24] = weight, $[25] = t4) : t4 = $[25], 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(46);
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 = _getArrayProp(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, T0 = StyledAvatar, t8 = typeof as == "string" ? as : void 0, t9 = "Avatar";
let t10;
$[22] !== color ? (t10 = /* @__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 }) }) }), $[22] = color, $[23] = t10) : t10 = $[23];
let t11;
$[24] !== __unstable_hideInnerStroke || $[25] !== _radius || $[26] !== _sizeRem || $[27] !== handleImageError || $[28] !== imageFailed || $[29] !== imageId || $[30] !== src ? (t11 = !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" })
] }), $[24] = __unstable_hideInnerStroke, $[25] = _radius, $[26] = _sizeRem, $[27] = handleImageError, $[28] = imageFailed, $[29] = imageId, $[30] = src, $[31] = t11) : t11 = $[31];
const t12 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: size2.map(_temp$a), weight: "medium", children: initials }) }) });
let t13;
return $[32] !== T0 || $[33] !== arrowPosition || $[34] !== as || $[35] !== color || $[36] !== ref || $[37] !== restProps || $[38] !== size2 || $[39] !== status || $[40] !== t10 || $[41] !== t11 || $[42] !== t12 || $[43] !== t8 || $[44] !== title ? (t13 = /* @__PURE__ */ jsxs(T0, { as, "data-as": t8, "data-ui": t9, ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
t10,
t11,
t12
] }), $[32] = T0, $[33] = arrowPosition, $[34] = as, $[35] = color, $[36] = ref, $[37] = restProps, $[38] = size2, $[39] = status, $[40] = t10, $[41] = t11, $[42] = t12, $[43] = t8, $[44] = title, $[45] = t13) : t13 = $[45], t13;
});
Avatar.displayName = "ForwardRef(Avatar)";
function _temp$a(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-color);
padding: 0 ${rem(space[2])};
&:not([hidden]) {
display: flex;
}
`;
}
const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
displayName: "StyledAvatarCounter",
componentId: "sc-1ydx86y-0"
})(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
const $ = c(20), {
count,
size: t0
} = props, sizeProp = t0 === void 0 ? 1 : t0;
let T0, T1, t1, t2, t3, t4, t5;
if ($[0] !== ref || $[1] !== sizeProp) {
const size2 = _getArrayProp(sizeProp);
T1 = StyledAvatarCounter, t3 = size2, t4 = "AvatarCounter", t5 = ref, T0 = Label, t1 = "span", t2 = size2.map(_temp$9), $[0] = ref, $[1] = sizeProp, $[2] = T0, $[3] = T1, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5;
} else
T0 = $[2], T1 = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8];
let t6;
$[9] !== T0 || $[10] !== count || $[11] !== t1 || $[12] !== t2 ? (t6 = /* @__PURE__ */ jsx(T0, { as: t1, size: t2, weight: "medium", children: count }), $[9] = T0, $[10] = count, $[11] = t1, $[12] = t2, $[13] = t6) : t6 = $[13];
let t7;
return $[14] !== T1 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsx(T1, { $size: t3, "data-ui": t4, ref: t5, children: t6 }), $[14] = T1, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
});
AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
function _temp$9(s) {
return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
}
const BASE_STYLES = css`
white-space: nowrap;
& > div {
vertical-align: top;
&:not([hidden]) {
display: inline-block;
}
}
`;
function avatarStackStyle() {
return BASE_STYLES;
}
function responsiveAvatarStackSizeStyle(props) {
const {
avatar,
media
} = getTheme_v2(props.theme);
return _responsive(media, props.$size, (size2) => {
const avatarSize = avatar.sizes[size2];
return avatarSize ? {
"& > div + div": {
marginLeft: rem(avatarSize.distance)
}
} : EMPTY_RECORD;
});
}
const StyledAvatarStack = /* @__PURE__ */ styled.div.withConfig({
displayName: "StyledAvatarStack",
componentId: "sc-cysmbb-0"
})(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
const $ = c(38);
let childrenProp, restProps, t0, t1;
$[0] !== props ? ({
children: childrenProp,
maxLength: t0,
size: t1,
...restProps
} = props, $[0] = props, $[1] = childrenProp, $[2] = restProps, $[3] = t0, $[4] = t1) : (childrenProp = $[1], restProps = $[2], t0 = $[3], t1 = $[4]);
const maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1;
let T0, t2, t3, t4, t5, t6, t7, t8;
if ($[5] !== childrenProp || $[6] !== maxLengthProp || $[7] !== ref || $[8] !== restProps || $[9] !== sizeProp) {
const children = Children.toArray(childrenProp).filter(isValidElement), maxLength = Math.max(maxLengthProp, 0);
let t92;
$[18] !== sizeProp ? (t92 = _getArrayProp(sizeProp), $[18] = sizeProp, $[19] = t92) : t92 = $[19];
const size2 = t92, len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
T0 = StyledAvatarStack, t2 = "AvatarStack", t3 = restProps, t4 = ref, t5 = size2, $[20] !== len || $[21] !== size2 ? (t6 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }), $[20] = len, $[21] = size2, $[22] = t6) : t6 = $[22], $[23] !== extraCount || $[24] !== len || $[25] !== size2 ? (t7 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) }), $[23] = extraCount, $[24] = len, $[25] = size2, $[26] = t7) : t7 = $[26];
let t10;
$[27] !== size2 ? (t10 = (child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, {
size: size2
}) }, String(childIndex)), $[27] = size2, $[28] = t10) : t10 = $[28], t8 = visibleChildren.map(t10), $[5] = childrenProp, $[6] = maxLengthProp, $[7] = ref, $[8] = restProps, $[9] = sizeProp, $[10] = T0, $[11] = t2, $[12] = t3, $[13] = t4, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8;
} else
T0 = $[10], t2 = $[11], t3 = $[12], t4 = $[13], t5 = $[14], t6 = $[15], t7 = $[16], t8 = $[17];
let t9;
return $[29] !== T0 || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 ? (t9 = /* @__PURE__ */ jsxs(T0, { "data-ui": t2, ...t3, ref: t4, $size: t5, children: [
t6,
t7,
t8
] }), $[29] = T0, $[30] = t2, $[31] = t3, $[32] = t4, $[33] = t5, $[34] = t6, $[35] = t7, $[36] = t8, $[37] = t9) : t9 = $[37], t9;
});
AvatarStack.displayName = "ForwardRef(AvatarStack)";
const StyledBox = /* @__PURE__ */ styled.div.withConfig({
displayName: "StyledBox",
componentId: "sc-1hhky9f-0"
})(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function(props, ref) {
const $ = c(109);
let column, columnEnd, columnStart, flex, height, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, restProps, row, rowEnd, rowStart, sizing, t0, t1, t2, t3;
$[0] !== props ? ({
as: t0,
column,
columnStart,
columnEnd,
display: t1,
flex,
height,
margin: t2,
marginX,
marginY,
marginTop,
marginRight,
marginBottom,
marginLeft,
overflow,
padding: t3,
paddingX,
paddingY,
paddingTop,
paddingRight,
paddingBottom,
paddingLeft,
row,
rowStart,
rowEnd,
sizing,
...restProps
} = props, $[0] = props, $[1] = column, $[2] = columnEnd, $[3] = columnStart, $[4] = flex, $[5] = height, $[6] = marginBottom, $[7] = marginLeft, $[8] = marginRight, $[9] = marginTop, $[10] = marginX, $[11] = marginY, $[12] = overflow, $[13] = paddingBottom, $[14] = paddingLeft, $[15] = paddingRight, $[16] = paddingTop, $[17] = paddingX, $[18] = paddingY, $[19] = restProps, $[20] = row, $[21] = rowEnd, $[22] = rowStart, $[23] = sizing, $[24] = t0, $[25] = t1, $[26] = t2, $[27] = t3) : (column = $[1], columnEnd = $[2], columnStart = $[3], flex = $[4], height = $[5], marginBottom = $[6], marginLeft = $[7], marginRight = $[8], marginTop = $[9], marginX = $[10], marginY = $[11], overflow = $[12], paddingBottom = $[13], paddingLeft = $[14], paddingRight = $[15], paddingTop = $[16], paddingX = $[17], paddingY = $[18], restProps = $[19], row = $[20], rowEnd = $[21], rowStart = $[22], sizing = $[23], t0 = $[24], t1 = $[25], t2 = $[26], t3 = $[27]);
const asProp = t0 === void 0 ? "div" : t0, display = t1 === void 0 ? "block" : t1, margin = t2 === void 0 ? 0 : t2, padding = t3 === void 0 ? 0 : t3, t4 = typeof asProp == "string" ? asProp : void 0;
let t5;
$[28] !== column ? (t5 = _getArrayProp(column), $[28] = column, $[29] = t5) : t5 = $[29];
let t6;
$[30] !== columnStart ? (t6 = _getArrayProp(columnStart), $[30] = columnStart, $[31] = t6) : t6 = $[31];
let t7;
$[32] !== columnEnd ? (t7 = _getArrayProp(columnEnd), $[32] = columnEnd, $[33] = t7) : t7 = $[33];
let t8;
$[34] !== display ? (t8 = _getArrayProp(display), $[34] = display, $[35] = t8) : t8 = $[35];
let t9;
$[36] !== flex ? (t9 = _getArrayProp(flex), $[36]