@sanity/ui 4.5.0-panda.1 → 4.5.0-panda.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{arrow-BVbVEhyN.js → arrow-CleOpGKV.js} +4 -4
- package/dist/{arrow-BVbVEhyN.js.map → arrow-CleOpGKV.js.map} +1 -1
- package/dist/autocomplete.js +7 -7
- package/dist/autocomplete.js.map +1 -1
- package/dist/breadcrumbs.js +5 -5
- package/dist/breadcrumbs.js.map +1 -1
- package/dist/{button-DLiQy0Qz.js → button-DnJrhWml.js} +6 -6
- package/dist/{button-DLiQy0Qz.js.map → button-DnJrhWml.js.map} +1 -1
- package/dist/{hotkeys-D-yvp5RU.js → hotkeys-Bd5rZOMO.js} +3 -3
- package/dist/{hotkeys-D-yvp5RU.js.map → hotkeys-Bd5rZOMO.js.map} +1 -1
- package/dist/index.js +40 -40
- package/dist/index.js.map +1 -1
- package/dist/{layer-CA793bFP.js → layer-umnlcWXZ.js} +2 -2
- package/dist/{layer-CA793bFP.js.map → layer-umnlcWXZ.js.map} +1 -1
- package/dist/menu.js +5 -5
- package/dist/menu.js.map +1 -1
- package/dist/{popover-bcCbXwoP.js → popover-Bb5NvE5n.js} +2 -2
- package/dist/{popover-bcCbXwoP.js.map → popover-Bb5NvE5n.js.map} +1 -1
- package/dist/popover.js +1 -1
- package/dist/{stack-TOlBMvbq.js → stack-DyrC2YfU.js} +2 -2
- package/dist/{stack-TOlBMvbq.js.map → stack-DyrC2YfU.js.map} +1 -1
- package/dist/styles.css +202 -202
- package/dist/{textInput-ByCyqiAh.js → textInput-DhYi5cPT.js} +8 -8
- package/dist/{textInput-ByCyqiAh.js.map → textInput-DhYi5cPT.js.map} +1 -1
- package/dist/toast.js +8 -8
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.js +4 -4
- package/dist/tooltip.js.map +1 -1
- package/package.json +4 -4
|
@@ -2,14 +2,14 @@ import { n as _getArrayProp } from "./helpers-XThPpWje.js";
|
|
|
2
2
|
import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
|
|
3
3
|
import { _ as useTheme_v2, h as _cardColorStyle, m as focusRingStyle, p as focusRingBorderStyle, v as responsiveRadiusStyle, y as Box } from "./useLayer-D_TnC6On.js";
|
|
4
4
|
import { t as Flex } from "./flex-ohP2jG9d.js";
|
|
5
|
-
import { n as Text } from "./stack-
|
|
5
|
+
import { n as Text } from "./stack-DyrC2YfU.js";
|
|
6
6
|
import { c } from "react/compiler-runtime";
|
|
7
7
|
import { SpinnerIcon } from "@sanity/icons/Spinner";
|
|
8
8
|
import { isValidElement } from "react";
|
|
9
9
|
import { css, styled } from "styled-components";
|
|
10
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
11
|
import { isValidElementType } from "react-is";
|
|
12
|
-
const spinnerIcon = "
|
|
12
|
+
const spinnerIcon = "u-fteRbN u-jmIqco u-iNjdVt";
|
|
13
13
|
/**
|
|
14
14
|
* Indicate that something is loading for an indeterminate amount of time.
|
|
15
15
|
*
|
|
@@ -67,7 +67,7 @@ function buttonStyles(props) {
|
|
|
67
67
|
let { style } = getTheme_v2(props.theme);
|
|
68
68
|
return css`${style?.button?.root}`;
|
|
69
69
|
}
|
|
70
|
-
const StyledButton = /* @__PURE__ */ styled(/* @__PURE__ */ styled(/* @__PURE__ */ styled(/* @__PURE__ */ styled.button.attrs({ className: "bNEqsD fAtomh bGTgkg MrtSM ixvSSg cfsavV kWIjhW dFXmkO bnBrYd emPzDJ iAFgHi gBjSqI eIsAcC eSsDnV cbkwRf mMFSU gSwZVf kWkaYS iDJVyZ grxHnN cpxeAE" }).withConfig({
|
|
70
|
+
const StyledButton = /* @__PURE__ */ styled(/* @__PURE__ */ styled(/* @__PURE__ */ styled(/* @__PURE__ */ styled.button.attrs({ className: "u-bNEqsD u-fAtomh u-bGTgkg u-MrtSM u-ixvSSg u-cfsavV u-kWIjhW u-dFXmkO u-bnBrYd u-emPzDJ u-iAFgHi u-gBjSqI u-eIsAcC u-eSsDnV u-cbkwRf u-mMFSU u-gSwZVf u-kWkaYS u-iDJVyZ u-grxHnN u-cpxeAE" }).withConfig({
|
|
71
71
|
displayName: "ButtonBase",
|
|
72
72
|
componentId: "sc-uik9k2-0"
|
|
73
73
|
})(buttonBaseStyles)).withConfig({
|
|
@@ -76,7 +76,7 @@ const StyledButton = /* @__PURE__ */ styled(/* @__PURE__ */ styled(/* @__PURE__
|
|
|
76
76
|
})(buttonColorStyles)).withConfig({
|
|
77
77
|
displayName: "ButtonDisabledAndFocus",
|
|
78
78
|
componentId: "sc-uik9k2-2"
|
|
79
|
-
})(buttonDisabledAndFocusStyles)).attrs((props) => ({ className: props.$width === "fill" ? "iQYtgN" : void 0 })).withConfig({
|
|
79
|
+
})(buttonDisabledAndFocusStyles)).attrs((props) => ({ className: props.$width === "fill" ? "u-iQYtgN" : void 0 })).withConfig({
|
|
80
80
|
displayName: "StyledButton",
|
|
81
81
|
componentId: "sc-uik9k2-3"
|
|
82
82
|
})(responsiveRadiusStyle, buttonStyles);
|
|
@@ -115,7 +115,7 @@ function ButtonComponent(props) {
|
|
|
115
115
|
}, $[48] = padding, $[49] = paddingBottom, $[50] = paddingLeft, $[51] = paddingRight, $[52] = paddingTop, $[53] = paddingX, $[54] = paddingY, $[55] = t19) : t19 = $[55];
|
|
116
116
|
let boxProps = t19, t20 = !!(loading || disabled), t21 = selected ? "" : void 0, t22 = !!(loading || disabled), t23;
|
|
117
117
|
$[56] === loading ? t23 = $[57] : (t23 = !!loading && /* @__PURE__ */ jsx("div", {
|
|
118
|
-
className: "fAtomh dhlXri hrbqoU kyGdCf gpkhCb HgOzd bsGhWR kiKDyH lhPceK hWgptE qbeer dStxMA",
|
|
118
|
+
className: "u-fAtomh u-dhlXri u-hrbqoU u-kyGdCf u-gpkhCb u-HgOzd u-bsGhWR u-kiKDyH u-lhPceK u-hWgptE u-qbeer u-dStxMA",
|
|
119
119
|
"data-ui": "ButtonLoading",
|
|
120
120
|
children: /* @__PURE__ */ jsx(Spinner, {})
|
|
121
121
|
}), $[56] = loading, $[57] = t23);
|
|
@@ -179,4 +179,4 @@ function ButtonComponent(props) {
|
|
|
179
179
|
const Button = ButtonComponent;
|
|
180
180
|
export { Spinner as n, spinnerIcon as r, Button as t };
|
|
181
181
|
|
|
182
|
-
//# sourceMappingURL=button-
|
|
182
|
+
//# sourceMappingURL=button-DnJrhWml.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-DLiQy0Qz.js","names":["<SpinnerIcon className={spinnerIcon} />","<Text data-ui=\"Spinner\" {...props}>\n <SpinnerIcon className={spinnerIcon} />\n </Text>","_c","fontSize = 1","justifyProp = 'center'","mode = 'default'","paddingProp = 3","radiusProp = 2","gap = 3","tone = 'default'","type = 'button'","muted = false","_getArrayProp(justifyProp)","_getArrayProp(paddingProp)","_getArrayProp(paddingXProp)","_getArrayProp(paddingYProp)","_getArrayProp(paddingTopProp)","_getArrayProp(paddingBottomProp)","_getArrayProp(paddingLeftProp)","_getArrayProp(paddingRightProp)","_getArrayProp(radiusProp)","_getArrayProp(gap)","{\n // flex: 1,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n }","useMemo(\n () => ({\n // flex: 1,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n }),\n [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],\n )","Boolean(loading) && (\n <div className={buttonLoadingBox} data-ui=\"ButtonLoading\">\n <Spinner />\n </div>\n )","(IconComponent || text || IconRightComponent) && (\n <Box as=\"span\" {...boxProps}>\n <Flex as=\"span\" justify={justify} gap={spacing}>\n {IconComponent && (\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n )}\n\n {text && (\n <Box>\n <Text\n muted={muted}\n align={textAlign}\n size={fontSize}\n textOverflow=\"ellipsis\"\n weight={textWeight ?? button.textWeight}\n >\n {text}\n </Text>\n </Box>\n )}\n\n {IconRightComponent && (\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n )}\n </Flex>\n </Box>\n )","button.textWeight","children && (\n <Box as=\"span\" {...boxProps}>\n {children}\n </Box>\n )","<StyledButton\n data-ui=\"Button\"\n {...restProps}\n $mode={mode}\n $radius={radius}\n $tone={tone}\n data-disabled={Boolean(loading || disabled)}\n data-selected={selected ? '' : undefined}\n disabled={Boolean(loading || disabled)}\n ref={ref}\n type={type}\n $width={width}\n >\n {Boolean(loading) && (\n <div className={buttonLoadingBox} data-ui=\"ButtonLoading\">\n <Spinner />\n </div>\n )}\n\n {(IconComponent || text || IconRightComponent) && (\n <Box as=\"span\" {...boxProps}>\n <Flex as=\"span\" justify={justify} gap={spacing}>\n {IconComponent && (\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n )}\n\n {text && (\n <Box>\n <Text\n muted={muted}\n align={textAlign}\n size={fontSize}\n textOverflow=\"ellipsis\"\n weight={textWeight ?? button.textWeight}\n >\n {text}\n </Text>\n </Box>\n )}\n\n {IconRightComponent && (\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n )}\n </Flex>\n </Box>\n )}\n\n {children && (\n <Box as=\"span\" {...boxProps}>\n {children}\n </Box>\n )}\n </StyledButton>","Boolean(loading || disabled)","selected ? '' : undefined","_c"],"sources":["../src/core/primitives/spinner/spinner.css.ts","../src/core/primitives/spinner/spinner.tsx","../src/core/primitives/button/styles.ts","../src/core/primitives/button/button.css.ts","../src/core/primitives/button/button.tsx"],"sourcesContent":["import {css, keyframes} from '#styled-system/css'\n\nconst rotate = keyframes({\n from: {transform: 'rotate(0deg)'},\n to: {transform: 'rotate(360deg)'},\n})\n\nconst size = 'round(1em, 2px)'\nexport const spinnerIcon = css({\n animation: `${rotate} 500ms linear infinite`,\n // Prevents a wobbly spinner on Safari\n height: size,\n width: size,\n})\n","import {SpinnerIcon} from '@sanity/icons/Spinner'\n\nimport {Text} from '../text/text'\n\nimport {spinnerIcon} from './spinner.css'\n\n/**\n * @public\n */\nexport interface SpinnerProps {\n muted?: boolean\n size?: number | number[]\n}\n\n/**\n * Indicate that something is loading for an indeterminate amount of time.\n *\n * @public\n */\nexport function Spinner(\n props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,\n) {\n return (\n <Text data-ui=\"Spinner\" {...props}>\n <SpinnerIcon className={spinnerIcon} />\n </Text>\n )\n}\n","import {css} from 'styled-components'\n\nimport {ThemeColorCard_v2} from '../../../theme/system/color/color'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_cardColorStyle} from '../../styles/card/_cardColorStyle'\nimport {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'\nimport {ThemeProps} from '../../styles/types'\nimport {ButtonMode, ButtonTone} from '../../types/button'\n\nfunction buttonToneColor(\n base: ThemeColorCard_v2,\n {$mode, $tone}: {$mode: ButtonMode; $tone: ButtonTone},\n) {\n const mode = base.button[$mode] || base.button.default\n\n return mode[$tone] || mode.default\n}\n\n/**\n * @internal\n */\nexport function buttonBaseStyles(props: ThemeProps): ReturnType<typeof css> {\n const {button} = getTheme_v2(props.theme)\n const borderBoxShadow = focusRingBorderStyle({\n width: button.border.width,\n color: 'var(--card-border-color)',\n })\n\n return css`\n /* Stays here: Breadcrumbs' expand button overrides it at equal specificity */\n margin: 0;\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n box-shadow: ${borderBoxShadow};\n\n &:not([data-disabled='true']) {\n &:focus:not(:focus-visible) {\n box-shadow: ${borderBoxShadow};\n }\n }\n `\n}\n\n/**\n * @internal\n */\nexport function buttonColorStyles(\n props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,\n): ReturnType<typeof css> {\n const {color: baseColor} = getTheme_v2(props.theme)\n const color = buttonToneColor(baseColor, props)\n\n return css`\n ${_cardColorStyle(baseColor, color.enabled)}\n\n &:not([data-disabled='true']) {\n @media (hover: hover) {\n &:hover {\n ${_cardColorStyle(baseColor, color.hovered)}\n }\n\n &:active {\n ${_cardColorStyle(baseColor, color.pressed)}\n }\n\n &[data-hovered] {\n ${_cardColorStyle(baseColor, color.hovered)}\n }\n }\n\n &[data-selected] {\n ${_cardColorStyle(baseColor, color.pressed)}\n }\n }\n `\n}\n\n/**\n * @internal\n */\nexport function buttonDisabledAndFocusStyles(\n props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,\n): ReturnType<typeof css> {\n const {button, color: baseColor} = getTheme_v2(props.theme)\n const color = buttonToneColor(baseColor, props)\n\n return css`\n &:disabled,\n &[data-disabled='true'] {\n ${_cardColorStyle(baseColor, color.disabled)}\n }\n\n &:not([data-disabled='true']):focus {\n box-shadow: ${focusRingStyle({\n base: baseColor,\n border: {width: 2, color: baseColor.bg},\n focusRing: button.focusRing,\n })};\n }\n `\n}\n\n/**\n * @internal\n */\nexport function buttonStyles(props: ThemeProps): ReturnType<typeof css> {\n const {style} = getTheme_v2(props.theme)\n\n return css`\n ${style?.button?.root}\n `\n}\n","import {css, firstThatWorks} from '#styled-system/css'\n\nexport const buttonRoot = css({\n 'WebkitFontSmoothing': 'inherit',\n 'appearance': 'none',\n 'display': 'inline-flex',\n 'alignItems': 'center',\n 'font': 'inherit',\n 'border': 0,\n 'outline': 'none',\n 'userSelect': 'none',\n 'textDecoration': 'none',\n 'boxSizing': 'border-box',\n 'padding': 0,\n 'whiteSpace': 'nowrap',\n 'textAlign': 'left',\n 'position': 'relative',\n 'verticalAlign': 'top',\n '&::-moz-focus-inner': {\n border: 0,\n padding: 0,\n },\n '& > span': {\n display: 'block',\n flex: 1,\n minWidth: 0,\n borderRadius: 'inherit',\n },\n})\n\nexport const buttonWidthFill = css({\n width: firstThatWorks('stretch', '-webkit-fill-available', '-moz-available'),\n})\n\nexport const buttonLoadingBox = css({\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'var(--card-bg-color)',\n borderRadius: 'inherit',\n zIndex: 1,\n boxShadow: 'inherit',\n})\n","import {isValidElement, useMemo} from 'react'\nimport {isValidElementType} from 'react-is'\nimport {styled} from 'styled-components'\n\nimport {ThemeFontWeightKey} from '../../../theme/system/font'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {responsiveRadiusStyle} from '../../styles/radius/radiusStyle'\nimport {ResponsiveRadiusStyleProps} from '../../styles/radius/types'\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth} from '../../types/button'\nimport {ElementType, Props} from '../../types/component'\nimport {FlexJustify} from '../../types/flex'\nimport {Box} from '../box/box'\nimport {Flex} from '../flex/flex'\nimport {Spinner} from '../spinner/spinner'\nimport {Text} from '../text/text'\nimport {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'\nimport {\n buttonBaseStyles,\n buttonColorStyles,\n buttonDisabledAndFocusStyles,\n buttonStyles,\n} from './styles'\n\nimport {buttonLoadingBox, buttonRoot, buttonWidthFill} from './button.css'\n\n/**\n * @public\n */\nexport interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {\n fontSize?: number | number[]\n mode?: ButtonMode\n // oxlint-disable-next-line no-redundant-type-constituents\n icon?: React.ElementType | React.ReactNode\n // oxlint-disable-next-line no-redundant-type-constituents\n iconRight?: React.ElementType | React.ReactNode\n justify?: FlexJustify | FlexJustify[]\n /**\n * @beta Do not use in production, as this might change.\n */\n loading?: boolean\n selected?: boolean\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n gap?: number | number[]\n muted?: boolean\n text?: React.ReactNode\n textAlign?: ButtonTextAlign\n textWeight?: ThemeFontWeightKey\n tone?: ButtonTone\n type?: 'button' | 'reset' | 'submit'\n width?: ButtonWidth\n}\n\n/**\n * @public\n */\nexport type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>\n\n// The static rules live in `buttonRoot` in styles.css; `width=\"fill\"` is the\n// `buttonWidthFill` class on the last level\nconst ButtonBase = styled.button.attrs({className: buttonRoot})(buttonBaseStyles)\n\nconst ButtonColor = styled(ButtonBase)<{$mode: ButtonMode; $tone: ButtonTone}>(buttonColorStyles)\n\nconst ButtonDisabledAndFocus = styled(ButtonColor)<{$mode: ButtonMode; $tone: ButtonTone}>(\n buttonDisabledAndFocusStyles,\n)\n\nconst StyledButton = styled(ButtonDisabledAndFocus).attrs<{$width?: ButtonWidth}>((props) => ({\n className: props.$width === 'fill' ? buttonWidthFill : undefined,\n}))<{$width?: ButtonWidth} & ResponsiveRadiusStyleProps>(responsiveRadiusStyle, buttonStyles)\n\nfunction ButtonComponent(\n props: ButtonOwnProps & {as?: ElementType} & Omit<\n React.HTMLProps<HTMLButtonElement>,\n 'as' | 'width'\n >,\n) {\n const {\n children,\n disabled,\n ref,\n fontSize = 1,\n icon: IconComponent,\n iconRight: IconRightComponent,\n justify: justifyProp = 'center',\n loading,\n mode = 'default',\n padding: paddingProp = 3,\n paddingX: paddingXProp,\n paddingY: paddingYProp,\n paddingTop: paddingTopProp,\n paddingBottom: paddingBottomProp,\n paddingLeft: paddingLeftProp,\n paddingRight: paddingRightProp,\n radius: radiusProp = 2,\n selected,\n gap = 3,\n text,\n textAlign,\n textWeight,\n tone = 'default',\n type = 'button',\n muted = false,\n width,\n ...restProps\n } = props\n const {button} = useTheme_v2()\n\n const justify = _getArrayProp(justifyProp)\n const padding = _getArrayProp(paddingProp)\n const paddingX = _getArrayProp(paddingXProp)\n const paddingY = _getArrayProp(paddingYProp)\n const paddingTop = _getArrayProp(paddingTopProp)\n const paddingBottom = _getArrayProp(paddingBottomProp)\n const paddingLeft = _getArrayProp(paddingLeftProp)\n const paddingRight = _getArrayProp(paddingRightProp)\n const radius = _getArrayProp(radiusProp)\n const spacing = _getArrayProp(gap)\n\n const boxProps = useMemo(\n () => ({\n // flex: 1,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n }),\n [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],\n )\n\n return (\n <StyledButton\n data-ui=\"Button\"\n {...restProps}\n $mode={mode}\n $radius={radius}\n $tone={tone}\n data-disabled={Boolean(loading || disabled)}\n data-selected={selected ? '' : undefined}\n disabled={Boolean(loading || disabled)}\n ref={ref}\n type={type}\n $width={width}\n >\n {Boolean(loading) && (\n <div className={buttonLoadingBox} data-ui=\"ButtonLoading\">\n <Spinner />\n </div>\n )}\n\n {(IconComponent || text || IconRightComponent) && (\n <Box as=\"span\" {...boxProps}>\n <Flex as=\"span\" justify={justify} gap={spacing}>\n {IconComponent && (\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n )}\n\n {text && (\n <Box>\n <Text\n muted={muted}\n align={textAlign}\n size={fontSize}\n textOverflow=\"ellipsis\"\n weight={textWeight ?? button.textWeight}\n >\n {text}\n </Text>\n </Box>\n )}\n\n {IconRightComponent && (\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n )}\n </Flex>\n </Box>\n )}\n\n {children && (\n <Box as=\"span\" {...boxProps}>\n {children}\n </Box>\n )}\n </StyledButton>\n )\n}\n\n/**\n * @public\n */\nexport const Button: <E extends ElementType = 'button'>(\n props: ButtonProps<E>,\n) => React.JSX.Element = ButtonComponent\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button-DnJrhWml.js","names":["<SpinnerIcon className={spinnerIcon} />","<Text data-ui=\"Spinner\" {...props}>\n <SpinnerIcon className={spinnerIcon} />\n </Text>","_c","fontSize = 1","justifyProp = 'center'","mode = 'default'","paddingProp = 3","radiusProp = 2","gap = 3","tone = 'default'","type = 'button'","muted = false","_getArrayProp(justifyProp)","_getArrayProp(paddingProp)","_getArrayProp(paddingXProp)","_getArrayProp(paddingYProp)","_getArrayProp(paddingTopProp)","_getArrayProp(paddingBottomProp)","_getArrayProp(paddingLeftProp)","_getArrayProp(paddingRightProp)","_getArrayProp(radiusProp)","_getArrayProp(gap)","{\n // flex: 1,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n }","useMemo(\n () => ({\n // flex: 1,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n }),\n [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],\n )","Boolean(loading) && (\n <div className={buttonLoadingBox} data-ui=\"ButtonLoading\">\n <Spinner />\n </div>\n )","(IconComponent || text || IconRightComponent) && (\n <Box as=\"span\" {...boxProps}>\n <Flex as=\"span\" justify={justify} gap={spacing}>\n {IconComponent && (\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n )}\n\n {text && (\n <Box>\n <Text\n muted={muted}\n align={textAlign}\n size={fontSize}\n textOverflow=\"ellipsis\"\n weight={textWeight ?? button.textWeight}\n >\n {text}\n </Text>\n </Box>\n )}\n\n {IconRightComponent && (\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n )}\n </Flex>\n </Box>\n )","button.textWeight","children && (\n <Box as=\"span\" {...boxProps}>\n {children}\n </Box>\n )","<StyledButton\n data-ui=\"Button\"\n {...restProps}\n $mode={mode}\n $radius={radius}\n $tone={tone}\n data-disabled={Boolean(loading || disabled)}\n data-selected={selected ? '' : undefined}\n disabled={Boolean(loading || disabled)}\n ref={ref}\n type={type}\n $width={width}\n >\n {Boolean(loading) && (\n <div className={buttonLoadingBox} data-ui=\"ButtonLoading\">\n <Spinner />\n </div>\n )}\n\n {(IconComponent || text || IconRightComponent) && (\n <Box as=\"span\" {...boxProps}>\n <Flex as=\"span\" justify={justify} gap={spacing}>\n {IconComponent && (\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n )}\n\n {text && (\n <Box>\n <Text\n muted={muted}\n align={textAlign}\n size={fontSize}\n textOverflow=\"ellipsis\"\n weight={textWeight ?? button.textWeight}\n >\n {text}\n </Text>\n </Box>\n )}\n\n {IconRightComponent && (\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n )}\n </Flex>\n </Box>\n )}\n\n {children && (\n <Box as=\"span\" {...boxProps}>\n {children}\n </Box>\n )}\n </StyledButton>","Boolean(loading || disabled)","selected ? '' : undefined","_c"],"sources":["../src/core/primitives/spinner/spinner.css.ts","../src/core/primitives/spinner/spinner.tsx","../src/core/primitives/button/styles.ts","../src/core/primitives/button/button.css.ts","../src/core/primitives/button/button.tsx"],"sourcesContent":["import {css, keyframes} from '#styled-system/css'\n\nconst rotate = keyframes({\n from: {transform: 'rotate(0deg)'},\n to: {transform: 'rotate(360deg)'},\n})\n\nconst size = 'round(1em, 2px)'\nexport const spinnerIcon = css({\n animation: `${rotate} 500ms linear infinite`,\n // Prevents a wobbly spinner on Safari\n height: size,\n width: size,\n})\n","import {SpinnerIcon} from '@sanity/icons/Spinner'\n\nimport {Text} from '../text/text'\n\nimport {spinnerIcon} from './spinner.css'\n\n/**\n * @public\n */\nexport interface SpinnerProps {\n muted?: boolean\n size?: number | number[]\n}\n\n/**\n * Indicate that something is loading for an indeterminate amount of time.\n *\n * @public\n */\nexport function Spinner(\n props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,\n) {\n return (\n <Text data-ui=\"Spinner\" {...props}>\n <SpinnerIcon className={spinnerIcon} />\n </Text>\n )\n}\n","import {css} from 'styled-components'\n\nimport {ThemeColorCard_v2} from '../../../theme/system/color/color'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_cardColorStyle} from '../../styles/card/_cardColorStyle'\nimport {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'\nimport {ThemeProps} from '../../styles/types'\nimport {ButtonMode, ButtonTone} from '../../types/button'\n\nfunction buttonToneColor(\n base: ThemeColorCard_v2,\n {$mode, $tone}: {$mode: ButtonMode; $tone: ButtonTone},\n) {\n const mode = base.button[$mode] || base.button.default\n\n return mode[$tone] || mode.default\n}\n\n/**\n * @internal\n */\nexport function buttonBaseStyles(props: ThemeProps): ReturnType<typeof css> {\n const {button} = getTheme_v2(props.theme)\n const borderBoxShadow = focusRingBorderStyle({\n width: button.border.width,\n color: 'var(--card-border-color)',\n })\n\n return css`\n /* Stays here: Breadcrumbs' expand button overrides it at equal specificity */\n margin: 0;\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n box-shadow: ${borderBoxShadow};\n\n &:not([data-disabled='true']) {\n &:focus:not(:focus-visible) {\n box-shadow: ${borderBoxShadow};\n }\n }\n `\n}\n\n/**\n * @internal\n */\nexport function buttonColorStyles(\n props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,\n): ReturnType<typeof css> {\n const {color: baseColor} = getTheme_v2(props.theme)\n const color = buttonToneColor(baseColor, props)\n\n return css`\n ${_cardColorStyle(baseColor, color.enabled)}\n\n &:not([data-disabled='true']) {\n @media (hover: hover) {\n &:hover {\n ${_cardColorStyle(baseColor, color.hovered)}\n }\n\n &:active {\n ${_cardColorStyle(baseColor, color.pressed)}\n }\n\n &[data-hovered] {\n ${_cardColorStyle(baseColor, color.hovered)}\n }\n }\n\n &[data-selected] {\n ${_cardColorStyle(baseColor, color.pressed)}\n }\n }\n `\n}\n\n/**\n * @internal\n */\nexport function buttonDisabledAndFocusStyles(\n props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,\n): ReturnType<typeof css> {\n const {button, color: baseColor} = getTheme_v2(props.theme)\n const color = buttonToneColor(baseColor, props)\n\n return css`\n &:disabled,\n &[data-disabled='true'] {\n ${_cardColorStyle(baseColor, color.disabled)}\n }\n\n &:not([data-disabled='true']):focus {\n box-shadow: ${focusRingStyle({\n base: baseColor,\n border: {width: 2, color: baseColor.bg},\n focusRing: button.focusRing,\n })};\n }\n `\n}\n\n/**\n * @internal\n */\nexport function buttonStyles(props: ThemeProps): ReturnType<typeof css> {\n const {style} = getTheme_v2(props.theme)\n\n return css`\n ${style?.button?.root}\n `\n}\n","import {css, firstThatWorks} from '#styled-system/css'\n\nexport const buttonRoot = css({\n 'WebkitFontSmoothing': 'inherit',\n 'appearance': 'none',\n 'display': 'inline-flex',\n 'alignItems': 'center',\n 'font': 'inherit',\n 'border': 0,\n 'outline': 'none',\n 'userSelect': 'none',\n 'textDecoration': 'none',\n 'boxSizing': 'border-box',\n 'padding': 0,\n 'whiteSpace': 'nowrap',\n 'textAlign': 'left',\n 'position': 'relative',\n 'verticalAlign': 'top',\n '&::-moz-focus-inner': {\n border: 0,\n padding: 0,\n },\n '& > span': {\n display: 'block',\n flex: 1,\n minWidth: 0,\n borderRadius: 'inherit',\n },\n})\n\nexport const buttonWidthFill = css({\n width: firstThatWorks('stretch', '-webkit-fill-available', '-moz-available'),\n})\n\nexport const buttonLoadingBox = css({\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'var(--card-bg-color)',\n borderRadius: 'inherit',\n zIndex: 1,\n boxShadow: 'inherit',\n})\n","import {isValidElement, useMemo} from 'react'\nimport {isValidElementType} from 'react-is'\nimport {styled} from 'styled-components'\n\nimport {ThemeFontWeightKey} from '../../../theme/system/font'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {responsiveRadiusStyle} from '../../styles/radius/radiusStyle'\nimport {ResponsiveRadiusStyleProps} from '../../styles/radius/types'\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth} from '../../types/button'\nimport {ElementType, Props} from '../../types/component'\nimport {FlexJustify} from '../../types/flex'\nimport {Box} from '../box/box'\nimport {Flex} from '../flex/flex'\nimport {Spinner} from '../spinner/spinner'\nimport {Text} from '../text/text'\nimport {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'\nimport {\n buttonBaseStyles,\n buttonColorStyles,\n buttonDisabledAndFocusStyles,\n buttonStyles,\n} from './styles'\n\nimport {buttonLoadingBox, buttonRoot, buttonWidthFill} from './button.css'\n\n/**\n * @public\n */\nexport interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {\n fontSize?: number | number[]\n mode?: ButtonMode\n // oxlint-disable-next-line no-redundant-type-constituents\n icon?: React.ElementType | React.ReactNode\n // oxlint-disable-next-line no-redundant-type-constituents\n iconRight?: React.ElementType | React.ReactNode\n justify?: FlexJustify | FlexJustify[]\n /**\n * @beta Do not use in production, as this might change.\n */\n loading?: boolean\n selected?: boolean\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n gap?: number | number[]\n muted?: boolean\n text?: React.ReactNode\n textAlign?: ButtonTextAlign\n textWeight?: ThemeFontWeightKey\n tone?: ButtonTone\n type?: 'button' | 'reset' | 'submit'\n width?: ButtonWidth\n}\n\n/**\n * @public\n */\nexport type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>\n\n// The static rules live in `buttonRoot` in styles.css; `width=\"fill\"` is the\n// `buttonWidthFill` class on the last level\nconst ButtonBase = styled.button.attrs({className: buttonRoot})(buttonBaseStyles)\n\nconst ButtonColor = styled(ButtonBase)<{$mode: ButtonMode; $tone: ButtonTone}>(buttonColorStyles)\n\nconst ButtonDisabledAndFocus = styled(ButtonColor)<{$mode: ButtonMode; $tone: ButtonTone}>(\n buttonDisabledAndFocusStyles,\n)\n\nconst StyledButton = styled(ButtonDisabledAndFocus).attrs<{$width?: ButtonWidth}>((props) => ({\n className: props.$width === 'fill' ? buttonWidthFill : undefined,\n}))<{$width?: ButtonWidth} & ResponsiveRadiusStyleProps>(responsiveRadiusStyle, buttonStyles)\n\nfunction ButtonComponent(\n props: ButtonOwnProps & {as?: ElementType} & Omit<\n React.HTMLProps<HTMLButtonElement>,\n 'as' | 'width'\n >,\n) {\n const {\n children,\n disabled,\n ref,\n fontSize = 1,\n icon: IconComponent,\n iconRight: IconRightComponent,\n justify: justifyProp = 'center',\n loading,\n mode = 'default',\n padding: paddingProp = 3,\n paddingX: paddingXProp,\n paddingY: paddingYProp,\n paddingTop: paddingTopProp,\n paddingBottom: paddingBottomProp,\n paddingLeft: paddingLeftProp,\n paddingRight: paddingRightProp,\n radius: radiusProp = 2,\n selected,\n gap = 3,\n text,\n textAlign,\n textWeight,\n tone = 'default',\n type = 'button',\n muted = false,\n width,\n ...restProps\n } = props\n const {button} = useTheme_v2()\n\n const justify = _getArrayProp(justifyProp)\n const padding = _getArrayProp(paddingProp)\n const paddingX = _getArrayProp(paddingXProp)\n const paddingY = _getArrayProp(paddingYProp)\n const paddingTop = _getArrayProp(paddingTopProp)\n const paddingBottom = _getArrayProp(paddingBottomProp)\n const paddingLeft = _getArrayProp(paddingLeftProp)\n const paddingRight = _getArrayProp(paddingRightProp)\n const radius = _getArrayProp(radiusProp)\n const spacing = _getArrayProp(gap)\n\n const boxProps = useMemo(\n () => ({\n // flex: 1,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n }),\n [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],\n )\n\n return (\n <StyledButton\n data-ui=\"Button\"\n {...restProps}\n $mode={mode}\n $radius={radius}\n $tone={tone}\n data-disabled={Boolean(loading || disabled)}\n data-selected={selected ? '' : undefined}\n disabled={Boolean(loading || disabled)}\n ref={ref}\n type={type}\n $width={width}\n >\n {Boolean(loading) && (\n <div className={buttonLoadingBox} data-ui=\"ButtonLoading\">\n <Spinner />\n </div>\n )}\n\n {(IconComponent || text || IconRightComponent) && (\n <Box as=\"span\" {...boxProps}>\n <Flex as=\"span\" justify={justify} gap={spacing}>\n {IconComponent && (\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n )}\n\n {text && (\n <Box>\n <Text\n muted={muted}\n align={textAlign}\n size={fontSize}\n textOverflow=\"ellipsis\"\n weight={textWeight ?? button.textWeight}\n >\n {text}\n </Text>\n </Box>\n )}\n\n {IconRightComponent && (\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n )}\n </Flex>\n </Box>\n )}\n\n {children && (\n <Box as=\"span\" {...boxProps}>\n {children}\n </Box>\n )}\n </StyledButton>\n )\n}\n\n/**\n * @public\n */\nexport const Button: <E extends ElementType = 'button'>(\n props: ButtonProps<E>,\n) => React.JSX.Element = ButtonComponent\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { i as _responsive, n as _getArrayProp, o as rem } from "./helpers-XThPpWje.js";
|
|
2
2
|
import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
|
|
3
3
|
import { v as responsiveRadiusStyle, y as Box } from "./useLayer-D_TnC6On.js";
|
|
4
|
-
import { n as Text } from "./stack-
|
|
4
|
+
import { n as Text } from "./stack-DyrC2YfU.js";
|
|
5
5
|
import { c } from "react/compiler-runtime";
|
|
6
6
|
import { clsx } from "clsx/lite";
|
|
7
7
|
import { Children, useEffect } from "react";
|
|
@@ -134,7 +134,7 @@ function Hotkeys(props) {
|
|
|
134
134
|
return $[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx(Fragment$1, {}), $[11] = t2) : t2 = $[11], t2;
|
|
135
135
|
}
|
|
136
136
|
let t2;
|
|
137
|
-
$[12] === className ? t2 = $[13] : (t2 = clsx("kWIjhW cJTEQk gIVJpv", className), $[12] = className, $[13] = t2);
|
|
137
|
+
$[12] === className ? t2 = $[13] : (t2 = clsx("u-kWIjhW u-cJTEQk u-gIVJpv", className), $[12] = className, $[13] = t2);
|
|
138
138
|
let t3;
|
|
139
139
|
if ($[14] !== fontSize || $[15] !== keys || $[16] !== padding || $[17] !== radius) {
|
|
140
140
|
let t4;
|
|
@@ -162,4 +162,4 @@ function Hotkeys(props) {
|
|
|
162
162
|
}
|
|
163
163
|
export { useGlobalKeyDown as i, KBD as n, Inline as r, Hotkeys as t };
|
|
164
164
|
|
|
165
|
-
//# sourceMappingURL=hotkeys-
|
|
165
|
+
//# sourceMappingURL=hotkeys-Bd5rZOMO.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hotkeys-D-yvp5RU.js","names":["(event: KeyboardEvent) => onKeyDown(event)","() => {\n const handler = (event: KeyboardEvent) => handleKeyDown(event)\n\n window.addEventListener('keydown', handler, options)\n\n return () => window.removeEventListener('keydown', handler, options)\n }","event","[options]","_c","Children.map(childrenProp, (child) => child && <div>{child}</div>)","(child) => child && <div>{child}</div>","useMemo(\n () => Children.map(childrenProp, (child) => child && <div>{child}</div>),\n [childrenProp],\n )","_getArrayProp(gap)","<StyledInline\n data-ui=\"Inline\"\n {...restProps}\n $space={_getArrayProp(gap)}\n forwardedAs={as}\n ref={ref}\n >\n {children}\n </StyledInline>","_c","fontSize = 0","padding = 1","radius = 2","_getArrayProp(radius)","<Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>","<Box as=\"span\" padding={padding}>\n <Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>\n </Box>","<StyledKBD data-ui=\"KBD\" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>\n <Box as=\"span\" padding={padding}>\n <Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>\n </Box>\n </StyledKBD>","_c","gap = 0.5","_getArrayProp(gap)","<></>","clsx(hotkeys, className)","keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n ))","(key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n )","<Inline as=\"span\" gap={spacing}>\n {keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n ))}\n </Inline>","<kbd className={clsx(hotkeys, className)} data-ui=\"Hotkeys\" ref={ref} {...restProps}>\n <Inline as=\"span\" gap={spacing}>\n {keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n ))}\n </Inline>\n </kbd>","_c","_Fragment","\"lineHeight\"","\"margin\""],"sources":["../src/core/hooks/useGlobalKeyDown.ts","../src/core/primitives/inline/styles.ts","../src/core/primitives/inline/inline.tsx","../src/core/primitives/kbd/kbd.tsx","../src/core/components/hotkeys/hotkeys.css.ts","../src/core/components/hotkeys/hotkeys.tsx"],"sourcesContent":["import {useEffect} from 'react'\n// TODO: switch to `useEffectEvent` from `react` once\n// https://github.com/facebook/react/issues/34818 is fixed in the lowest React\n// version we support: on React 19.2 the native hook never sees values past\n// the first render when the calling component is wrapped in `forwardRef` or\n// `memo`. This public hook runs in the fiber of whatever component calls it\n// (consumers may call it from `forwardRef` or `memo` components).\nimport {useEffectEvent} from 'use-effect-event'\n\n/**\n * Adds global keydown event listener to the window.\n *\n * @param onKeyDown - The function to call when a keydown event is triggered.\n * @param options - The options to pass to the addEventListener function (example, capture: true)\n * @beta\n */\nexport function useGlobalKeyDown(\n onKeyDown: (event: KeyboardEvent) => void,\n options?: AddEventListenerOptions,\n): void {\n const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))\n\n useEffect(() => {\n const handler = (event: KeyboardEvent) => handleKeyDown(event)\n\n window.addEventListener('keydown', handler, options)\n\n return () => window.removeEventListener('keydown', handler, options)\n }, [options])\n}\n","import {CSSObject} from '../../../theme/system/css'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_responsive, rem} from '../../styles/helpers'\nimport {ThemeProps} from '../../styles/types'\nimport {ResponsiveInlineSpaceStyleProps} from './types'\n\nexport function inlineBaseStyle(): CSSObject {\n return {\n 'lineHeight': '0',\n\n '&&:not([hidden])': {\n display: 'block',\n },\n\n '& > div': {\n display: 'inline-block',\n verticalAlign: 'middle',\n },\n }\n}\n\nexport function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {\n const {media, space} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$space, (spaceIndex) => {\n const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])\n\n return {\n 'margin': `-${_space} 0 0 -${_space}`,\n '& > div': {padding: `${_space} 0 0 ${_space}`},\n }\n })\n}\n","import {Children, useMemo} from 'react'\nimport {styled} from 'styled-components'\n\nimport {_getArrayProp} from '../../styles/helpers'\nimport {ElementType, Props} from '../../types/component'\nimport {Box, BoxOwnProps} from '../box/box'\nimport {inlineBaseStyle, inlineSpaceStyle} from './styles'\nimport {ResponsiveInlineSpaceStyleProps} from './types'\n\n/**\n * @public\n */\nexport interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n /** The spacing between children. */\n gap?: number | number[]\n}\n\n/**\n * @public\n */\nexport type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>\n\nconst StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)\n\nfunction InlineComponent(\n props: InlineOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,\n) {\n const {as, children: childrenProp, gap, ref, ...restProps} = props\n\n const children = useMemo(\n () => Children.map(childrenProp, (child) => child && <div>{child}</div>),\n [childrenProp],\n )\n\n return (\n <StyledInline\n data-ui=\"Inline\"\n {...restProps}\n $space={_getArrayProp(gap)}\n forwardedAs={as}\n ref={ref}\n >\n {children}\n </StyledInline>\n )\n}\n\n/**\n * The `Inline` component is a layout utility for aligning and spacing items horizontally.\n *\n * @public\n */\n// oxlint-disable-next-line no-unsafe-type-assertion\nexport const Inline = InlineComponent as unknown as <E extends ElementType = 'div'>(\n props: InlineProps<E>,\n) => React.JSX.Element\n","import {css, styled} from 'styled-components'\n\nimport {_getArrayProp} from '../../styles/helpers'\nimport {responsiveRadiusStyle} from '../../styles/radius/radiusStyle'\nimport {ResponsiveRadiusStyleProps} from '../../styles/radius/types'\nimport {ElementType, Props} from '../../types/component'\nimport {Radius} from '../../types/radius'\nimport {Box} from '../box/box'\nimport {Text} from '../text/text'\n\n/**\n * @public\n */\nexport interface KBDOwnProps {\n fontSize?: number | number[]\n padding?: number | number[]\n radius?: Radius | Radius[]\n}\n\n/**\n * @public\n */\nexport type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>\n\nconst kbdBaseStyle = css`\n --card-bg-color: var(--card-kbd-bg-color);\n --card-border-color: var(--card-kbd-border-color);\n --card-fg-color: var(--card-kbd-fg-color);\n\n box-shadow: inset 0 0 0 1px var(--card-border-color);\n background: var(--card-bg-color);\n font: inherit;\n\n vertical-align: top;\n\n &:not([hidden]) {\n display: inline-block;\n }\n`\n\nconst KBDBase = styled.kbd`\n ${kbdBaseStyle}\n`\n\nconst StyledKBD = styled(KBDBase)<ResponsiveRadiusStyleProps>(responsiveRadiusStyle)\n\nfunction KBDComponent(\n props: KBDOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,\n) {\n const {children, fontSize = 0, padding = 1, radius = 2, ref, ...restProps} = props\n\n return (\n <StyledKBD data-ui=\"KBD\" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>\n <Box as=\"span\" padding={padding}>\n <Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>\n </Box>\n </StyledKBD>\n )\n}\n\n/**\n * Used to define some text as keyboard input.\n *\n * @public\n */\nexport const KBD: <E extends ElementType = 'kbd'>(props: KBDProps<E>) => React.JSX.Element =\n KBDComponent\n","import {css} from '#styled-system/css'\n\nexport const hotkeys = css({\n 'font': 'inherit',\n 'padding': '1px',\n '&:not([hidden])': {\n display: 'block',\n },\n})\n","import {clsx} from 'clsx/lite'\nimport {styled} from 'styled-components'\n\nimport {Inline} from '../../primitives/inline/inline'\nimport {KBD} from '../../primitives/kbd/kbd'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {Radius} from '../../types/radius'\n\nimport {hotkeys} from './hotkeys.css'\n\n/**\n * @public\n */\nexport interface HotkeysProps {\n fontSize?: number | number[]\n gap?: number | number[]\n padding?: number | number[]\n radius?: Radius | Radius[]\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n keys?: string[]\n}\n\n// Stays on styled-components: `display: block` must beat KBD's runtime\n// `display: inline-block` at equal specificity, which needs both rules in the\n// runtime stylesheet.\nconst Key = styled(KBD)`\n &:not([hidden]) {\n display: block;\n }\n`\n\n/**\n * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.\n *\n * @public\n */\nexport function Hotkeys(props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>) {\n const {className, fontSize, gap = 0.5, keys, padding, radius, ref, ...restProps} = props\n const spacing = _getArrayProp(gap)\n\n if (!keys || keys.length === 0) {\n return <></>\n }\n\n return (\n <kbd className={clsx(hotkeys, className)} data-ui=\"Hotkeys\" ref={ref} {...restProps}>\n <Inline as=\"span\" gap={spacing}>\n {keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n ))}\n </Inline>\n </kbd>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"hotkeys-Bd5rZOMO.js","names":["(event: KeyboardEvent) => onKeyDown(event)","() => {\n const handler = (event: KeyboardEvent) => handleKeyDown(event)\n\n window.addEventListener('keydown', handler, options)\n\n return () => window.removeEventListener('keydown', handler, options)\n }","event","[options]","_c","Children.map(childrenProp, (child) => child && <div>{child}</div>)","(child) => child && <div>{child}</div>","useMemo(\n () => Children.map(childrenProp, (child) => child && <div>{child}</div>),\n [childrenProp],\n )","_getArrayProp(gap)","<StyledInline\n data-ui=\"Inline\"\n {...restProps}\n $space={_getArrayProp(gap)}\n forwardedAs={as}\n ref={ref}\n >\n {children}\n </StyledInline>","_c","fontSize = 0","padding = 1","radius = 2","_getArrayProp(radius)","<Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>","<Box as=\"span\" padding={padding}>\n <Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>\n </Box>","<StyledKBD data-ui=\"KBD\" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>\n <Box as=\"span\" padding={padding}>\n <Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>\n </Box>\n </StyledKBD>","_c","gap = 0.5","_getArrayProp(gap)","<></>","clsx(hotkeys, className)","keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n ))","(key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n )","<Inline as=\"span\" gap={spacing}>\n {keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n ))}\n </Inline>","<kbd className={clsx(hotkeys, className)} data-ui=\"Hotkeys\" ref={ref} {...restProps}>\n <Inline as=\"span\" gap={spacing}>\n {keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n ))}\n </Inline>\n </kbd>","_c","_Fragment","\"lineHeight\"","\"margin\""],"sources":["../src/core/hooks/useGlobalKeyDown.ts","../src/core/primitives/inline/styles.ts","../src/core/primitives/inline/inline.tsx","../src/core/primitives/kbd/kbd.tsx","../src/core/components/hotkeys/hotkeys.css.ts","../src/core/components/hotkeys/hotkeys.tsx"],"sourcesContent":["import {useEffect} from 'react'\n// TODO: switch to `useEffectEvent` from `react` once\n// https://github.com/facebook/react/issues/34818 is fixed in the lowest React\n// version we support: on React 19.2 the native hook never sees values past\n// the first render when the calling component is wrapped in `forwardRef` or\n// `memo`. This public hook runs in the fiber of whatever component calls it\n// (consumers may call it from `forwardRef` or `memo` components).\nimport {useEffectEvent} from 'use-effect-event'\n\n/**\n * Adds global keydown event listener to the window.\n *\n * @param onKeyDown - The function to call when a keydown event is triggered.\n * @param options - The options to pass to the addEventListener function (example, capture: true)\n * @beta\n */\nexport function useGlobalKeyDown(\n onKeyDown: (event: KeyboardEvent) => void,\n options?: AddEventListenerOptions,\n): void {\n const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))\n\n useEffect(() => {\n const handler = (event: KeyboardEvent) => handleKeyDown(event)\n\n window.addEventListener('keydown', handler, options)\n\n return () => window.removeEventListener('keydown', handler, options)\n }, [options])\n}\n","import {CSSObject} from '../../../theme/system/css'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_responsive, rem} from '../../styles/helpers'\nimport {ThemeProps} from '../../styles/types'\nimport {ResponsiveInlineSpaceStyleProps} from './types'\n\nexport function inlineBaseStyle(): CSSObject {\n return {\n 'lineHeight': '0',\n\n '&&:not([hidden])': {\n display: 'block',\n },\n\n '& > div': {\n display: 'inline-block',\n verticalAlign: 'middle',\n },\n }\n}\n\nexport function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {\n const {media, space} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$space, (spaceIndex) => {\n const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])\n\n return {\n 'margin': `-${_space} 0 0 -${_space}`,\n '& > div': {padding: `${_space} 0 0 ${_space}`},\n }\n })\n}\n","import {Children, useMemo} from 'react'\nimport {styled} from 'styled-components'\n\nimport {_getArrayProp} from '../../styles/helpers'\nimport {ElementType, Props} from '../../types/component'\nimport {Box, BoxOwnProps} from '../box/box'\nimport {inlineBaseStyle, inlineSpaceStyle} from './styles'\nimport {ResponsiveInlineSpaceStyleProps} from './types'\n\n/**\n * @public\n */\nexport interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n /** The spacing between children. */\n gap?: number | number[]\n}\n\n/**\n * @public\n */\nexport type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>\n\nconst StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)\n\nfunction InlineComponent(\n props: InlineOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,\n) {\n const {as, children: childrenProp, gap, ref, ...restProps} = props\n\n const children = useMemo(\n () => Children.map(childrenProp, (child) => child && <div>{child}</div>),\n [childrenProp],\n )\n\n return (\n <StyledInline\n data-ui=\"Inline\"\n {...restProps}\n $space={_getArrayProp(gap)}\n forwardedAs={as}\n ref={ref}\n >\n {children}\n </StyledInline>\n )\n}\n\n/**\n * The `Inline` component is a layout utility for aligning and spacing items horizontally.\n *\n * @public\n */\n// oxlint-disable-next-line no-unsafe-type-assertion\nexport const Inline = InlineComponent as unknown as <E extends ElementType = 'div'>(\n props: InlineProps<E>,\n) => React.JSX.Element\n","import {css, styled} from 'styled-components'\n\nimport {_getArrayProp} from '../../styles/helpers'\nimport {responsiveRadiusStyle} from '../../styles/radius/radiusStyle'\nimport {ResponsiveRadiusStyleProps} from '../../styles/radius/types'\nimport {ElementType, Props} from '../../types/component'\nimport {Radius} from '../../types/radius'\nimport {Box} from '../box/box'\nimport {Text} from '../text/text'\n\n/**\n * @public\n */\nexport interface KBDOwnProps {\n fontSize?: number | number[]\n padding?: number | number[]\n radius?: Radius | Radius[]\n}\n\n/**\n * @public\n */\nexport type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>\n\nconst kbdBaseStyle = css`\n --card-bg-color: var(--card-kbd-bg-color);\n --card-border-color: var(--card-kbd-border-color);\n --card-fg-color: var(--card-kbd-fg-color);\n\n box-shadow: inset 0 0 0 1px var(--card-border-color);\n background: var(--card-bg-color);\n font: inherit;\n\n vertical-align: top;\n\n &:not([hidden]) {\n display: inline-block;\n }\n`\n\nconst KBDBase = styled.kbd`\n ${kbdBaseStyle}\n`\n\nconst StyledKBD = styled(KBDBase)<ResponsiveRadiusStyleProps>(responsiveRadiusStyle)\n\nfunction KBDComponent(\n props: KBDOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,\n) {\n const {children, fontSize = 0, padding = 1, radius = 2, ref, ...restProps} = props\n\n return (\n <StyledKBD data-ui=\"KBD\" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>\n <Box as=\"span\" padding={padding}>\n <Text as=\"span\" size={fontSize} weight=\"semibold\">\n {children}\n </Text>\n </Box>\n </StyledKBD>\n )\n}\n\n/**\n * Used to define some text as keyboard input.\n *\n * @public\n */\nexport const KBD: <E extends ElementType = 'kbd'>(props: KBDProps<E>) => React.JSX.Element =\n KBDComponent\n","import {css} from '#styled-system/css'\n\nexport const hotkeys = css({\n 'font': 'inherit',\n 'padding': '1px',\n '&:not([hidden])': {\n display: 'block',\n },\n})\n","import {clsx} from 'clsx/lite'\nimport {styled} from 'styled-components'\n\nimport {Inline} from '../../primitives/inline/inline'\nimport {KBD} from '../../primitives/kbd/kbd'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {Radius} from '../../types/radius'\n\nimport {hotkeys} from './hotkeys.css'\n\n/**\n * @public\n */\nexport interface HotkeysProps {\n fontSize?: number | number[]\n gap?: number | number[]\n padding?: number | number[]\n radius?: Radius | Radius[]\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n keys?: string[]\n}\n\n// Stays on styled-components: `display: block` must beat KBD's runtime\n// `display: inline-block` at equal specificity, which needs both rules in the\n// runtime stylesheet.\nconst Key = styled(KBD)`\n &:not([hidden]) {\n display: block;\n }\n`\n\n/**\n * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.\n *\n * @public\n */\nexport function Hotkeys(props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>) {\n const {className, fontSize, gap = 0.5, keys, padding, radius, ref, ...restProps} = props\n const spacing = _getArrayProp(gap)\n\n if (!keys || keys.length === 0) {\n return <></>\n }\n\n return (\n <kbd className={clsx(hotkeys, className)} data-ui=\"Hotkeys\" ref={ref} {...restProps}>\n <Inline as=\"span\" gap={spacing}>\n {keys.map((key, i) => (\n // oxlint-disable-next-line no-array-index-key\n <Key key={i} fontSize={fontSize} padding={padding} radius={radius}>\n {key}\n </Key>\n ))}\n </Inline>\n </kbd>\n )\n}\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { a as _ruleSet, c as EMPTY_RECORD, i as _responsive, n as _getArrayProp, o as rem, r as _getResponsiveSpace, t as _fillCSSObject } from "./helpers-XThPpWje.js";
|
|
3
|
-
import { _ as isFocusable, a as textInputColorStyle, c as textInputRepresentationColorStyle, d as responsiveInputPaddingStyle, f as useCustomValidity, g as focusLastDescendant, h as focusFirstDescendant, i as textInputBaseStyle, l as textInputRepresentationStyle, m as attemptFocus, n as inputRoot, o as textInputFontSizeStyle, p as _hasFocus, r as textAreaRoot, s as textInputFontStyle, t as TextInput, u as responsiveInputPaddingIconRightStyle, v as _raf, y as _raf2 } from "./textInput-
|
|
3
|
+
import { _ as isFocusable, a as textInputColorStyle, c as textInputRepresentationColorStyle, d as responsiveInputPaddingStyle, f as useCustomValidity, g as focusLastDescendant, h as focusFirstDescendant, i as textInputBaseStyle, l as textInputRepresentationStyle, m as attemptFocus, n as inputRoot, o as textInputFontSizeStyle, p as _hasFocus, r as textAreaRoot, s as textInputFontStyle, t as TextInput, u as responsiveInputPaddingIconRightStyle, v as _raf, y as _raf2 } from "./textInput-DhYi5cPT.js";
|
|
4
4
|
import { a as isHTMLElement, c as isHTMLTextAreaElement, i as isHTMLButtonElement, n as containsOrEqualsElement, o as isHTMLInputElement, r as isHTMLAnchorElement, s as isHTMLSelectElement, t as _isEnterToClickElement } from "./element-BYgCE_iK.js";
|
|
5
5
|
import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
|
|
6
6
|
import { _ as useTheme_v2, a as useMatchMedia, b as responsivePaddingStyle, c as ThemeColorProvider, d as createGlobalScopedContext, g as useTheme, h as _cardColorStyle, i as usePrefersReducedMotion, l as useRootTheme, m as focusRingStyle, n as LayerProvider, o as useMediaIndex, p as focusRingBorderStyle, s as Card, t as useLayer, u as ThemeProvider, v as responsiveRadiusStyle, y as Box } from "./useLayer-D_TnC6On.js";
|
|
7
7
|
import { t as Flex } from "./flex-ohP2jG9d.js";
|
|
8
|
-
import { a as fontColorStyle, i as responsiveTextAlignStyle, n as Text, r as SpanWithTextOverflow, t as Stack } from "./stack-
|
|
8
|
+
import { a as fontColorStyle, i as responsiveTextAlignStyle, n as Text, r as SpanWithTextOverflow, t as Stack } from "./stack-DyrC2YfU.js";
|
|
9
9
|
import { i as responsiveFont, n as _fontWeight, r as _responsiveFontSize, t as _fontBase } from "./responsiveFont-Cyvxxz-G.js";
|
|
10
|
-
import { n as Spinner, t as Button } from "./button-
|
|
10
|
+
import { n as Spinner, t as Button } from "./button-DnJrhWml.js";
|
|
11
11
|
import { t as _elementSizeObserver } from "./elementSizeObserver-pevZfdGa.js";
|
|
12
|
-
import { a as resolvePortalElement, i as PortalContext, n as Portal, o as useBoundaryElement, r as usePortal, s as BoundaryElementContext, t as Arrow } from "./arrow-
|
|
12
|
+
import { a as resolvePortalElement, i as PortalContext, n as Portal, o as useBoundaryElement, r as usePortal, s as BoundaryElementContext, t as Arrow } from "./arrow-CleOpGKV.js";
|
|
13
13
|
import { t as useClickOutsideEvent } from "./useClickOutsideEvent-CC1zgOmv.js";
|
|
14
14
|
import { a as rgba$1, c as hslToRgb$1, i as multiply$1, l as rgbToHex$1, n as buildTheme, o as parseColor$1, r as screen$1, s as hexToRgb$1, t as createColorTheme$1, u as rgbToHsl$1 } from "./factory-BzXTX8_Q.js";
|
|
15
|
-
import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-
|
|
16
|
-
import { t as Layer } from "./layer-
|
|
15
|
+
import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-Bd5rZOMO.js";
|
|
16
|
+
import { t as Layer } from "./layer-umnlcWXZ.js";
|
|
17
17
|
import { t as Grid } from "./grid-D-gOpN8z.js";
|
|
18
18
|
import { c } from "react/compiler-runtime";
|
|
19
19
|
import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
|
|
@@ -123,7 +123,7 @@ function DialogCard(props) {
|
|
|
123
123
|
$[24] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => [ref.current], $[24] = t10) : t10 = $[24], useClickOutsideEvent(t9, t10);
|
|
124
124
|
let t11;
|
|
125
125
|
$[25] !== header || $[26] !== labelId || $[27] !== onClose || $[28] !== showCloseButton || $[29] !== showHeader ? (t11 = showHeader && /* @__PURE__ */ jsx(Box, {
|
|
126
|
-
className: "emPzDJ eYlglL",
|
|
126
|
+
className: "u-emPzDJ u-eYlglL",
|
|
127
127
|
"data-ui": "DialogHeader",
|
|
128
128
|
children: /* @__PURE__ */ jsxs(Flex, {
|
|
129
129
|
align: "flex-start",
|
|
@@ -152,7 +152,7 @@ function DialogCard(props) {
|
|
|
152
152
|
}), $[25] = header, $[26] = labelId, $[27] = onClose, $[28] = showCloseButton, $[29] = showHeader, $[30] = t11) : t11 = $[30];
|
|
153
153
|
let t12;
|
|
154
154
|
$[31] === children ? t12 = $[32] : (t12 = /* @__PURE__ */ jsx(Box, {
|
|
155
|
-
className: "dFXmkO gWzzAr emPzDJ dStxMA",
|
|
155
|
+
className: "u-dFXmkO u-gWzzAr u-emPzDJ u-dStxMA",
|
|
156
156
|
"data-ui": "DialogContent",
|
|
157
157
|
flex: 1,
|
|
158
158
|
ref: contentRef,
|
|
@@ -161,13 +161,13 @@ function DialogCard(props) {
|
|
|
161
161
|
}), $[31] = children, $[32] = t12);
|
|
162
162
|
let t13;
|
|
163
163
|
$[33] === footer ? t13 = $[34] : (t13 = footer && /* @__PURE__ */ jsx(Box, {
|
|
164
|
-
className: "emPzDJ cYUUrS",
|
|
164
|
+
className: "u-emPzDJ u-cYUUrS",
|
|
165
165
|
"data-ui": "DialogFooter",
|
|
166
166
|
children: footer
|
|
167
167
|
}), $[33] = footer, $[34] = t13);
|
|
168
168
|
let t14;
|
|
169
169
|
$[35] !== t11 || $[36] !== t12 || $[37] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Flex, {
|
|
170
|
-
className: "jLKaQQ diGfnu",
|
|
170
|
+
className: "u-jLKaQQ u-diGfnu",
|
|
171
171
|
direction: "column",
|
|
172
172
|
flex: 1,
|
|
173
173
|
children: [
|
|
@@ -178,7 +178,7 @@ function DialogCard(props) {
|
|
|
178
178
|
}), $[35] = t11, $[36] = t12, $[37] = t13, $[38] = t14) : t14 = $[38];
|
|
179
179
|
let t15;
|
|
180
180
|
$[39] !== radius || $[40] !== scheme || $[41] !== shadow || $[42] !== t14 ? (t15 = /* @__PURE__ */ jsx(Card, {
|
|
181
|
-
className: "ftCJS jLKaQQ fqYOpD diGfnu",
|
|
181
|
+
className: "u-ftCJS u-jLKaQQ u-fqYOpD u-diGfnu",
|
|
182
182
|
display: "flex",
|
|
183
183
|
radius,
|
|
184
184
|
ref,
|
|
@@ -188,7 +188,7 @@ function DialogCard(props) {
|
|
|
188
188
|
}), $[39] = radius, $[40] = scheme, $[41] = shadow, $[42] = t14, $[43] = t15) : t15 = $[43];
|
|
189
189
|
let t16;
|
|
190
190
|
return $[44] !== t15 || $[45] !== width ? (t16 = /* @__PURE__ */ jsx(Container, {
|
|
191
|
-
className: "fAtomh bhTTzp ePwsZv bsGhWR diGfnu",
|
|
191
|
+
className: "u-fAtomh u-bhTTzp u-ePwsZv u-bsGhWR u-diGfnu",
|
|
192
192
|
"data-ui": "DialogCard",
|
|
193
193
|
display: "flex",
|
|
194
194
|
width,
|
|
@@ -236,8 +236,8 @@ function Dialog(props) {
|
|
|
236
236
|
}
|
|
237
237
|
}, 0);
|
|
238
238
|
}, $[39] = boundaryElement, $[40] = portalElement, $[41] = t14) : t14 = $[41];
|
|
239
|
-
let handleRootClick = t14, t15 = animate && "
|
|
240
|
-
$[42] !== className || $[43] !== t15 ? (t16 = clsx("fAtomh kyGdCf bsGhWR kiKDyH dFXmkO hWgptE qbeer djbxbl", t15, className), $[42] = className, $[43] = t15, $[44] = t16) : t16 = $[44];
|
|
239
|
+
let handleRootClick = t14, t15 = animate && "u-evIBAF u-tKGdt", t16;
|
|
240
|
+
$[42] !== className || $[43] !== t15 ? (t16 = clsx("u-fAtomh u-kyGdCf u-bsGhWR u-kiKDyH u-dFXmkO u-hWgptE u-qbeer u-djbxbl", t15, className), $[42] = className, $[43] = t15, $[44] = t16) : t16 = $[44];
|
|
241
241
|
let t17;
|
|
242
242
|
$[45] === Symbol.for("react.memo_cache_sentinel") ? (t17 = /* @__PURE__ */ jsx("div", {
|
|
243
243
|
ref: preDivRef,
|
|
@@ -334,8 +334,8 @@ function Skeleton(props) {
|
|
|
334
334
|
}, t2 = [delay], $[7] = delay, $[8] = t1, $[9] = t2), useEffect(t1, t2);
|
|
335
335
|
let t3;
|
|
336
336
|
$[10] === radius ? t3 = $[11] : (t3 = _getArrayProp(radius), $[10] = radius, $[11] = t3);
|
|
337
|
-
let t4 = !delay || visible ? "frJqtw" : "bgTIyZ", t5 = animated ? "bjraDg iWSyZJ dJxRDW eYpbHi krabKr TeBDG
|
|
338
|
-
$[12] !== className || $[13] !== t4 || $[14] !== t5 ? (t6 = clsx("eyEVfe eCMeFC", t4, t5, className), $[12] = className, $[13] = t4, $[14] = t5, $[15] = t6) : t6 = $[15];
|
|
337
|
+
let t4 = !delay || visible ? "u-frJqtw" : "u-bgTIyZ", t5 = animated ? "u-bjraDg u-iWSyZJ u-dJxRDW u-eYpbHi u-krabKr u-TeBDG u-kugzhg u-gPHhfd u-anCSM u-kAaLvT u-UPzAf u-kNAlYZ u-eBCRlA u-cgyejD" : "u-iWSyZJ", t6;
|
|
338
|
+
$[12] !== className || $[13] !== t4 || $[14] !== t5 ? (t6 = clsx("u-eyEVfe u-eCMeFC", t4, t5, className), $[12] = className, $[13] = t4, $[14] = t5, $[15] = t6) : t6 = $[15];
|
|
339
339
|
let t7;
|
|
340
340
|
return $[16] !== ref || $[17] !== restProps || $[18] !== t3 || $[19] !== t6 ? (t7 = /* @__PURE__ */ jsx(StyledSkeleton$1, {
|
|
341
341
|
"data-ui": "Skeleton",
|
|
@@ -444,7 +444,7 @@ function Tab(props) {
|
|
|
444
444
|
focused && !focusedRef.current && (ref.current && ref.current.focus(), focusedRef.current = !0);
|
|
445
445
|
}, t6 = [focused], $[17] = focused, $[18] = t5, $[19] = t6), useEffect(t5, t6);
|
|
446
446
|
let t7;
|
|
447
|
-
$[20] === className ? t7 = $[21] : (t7 = clsx("hPjhXT", className), $[20] = className, $[21] = t7);
|
|
447
|
+
$[20] === className ? t7 = $[21] : (t7 = clsx("u-hPjhXT", className), $[20] = className, $[21] = t7);
|
|
448
448
|
let t8 = selected ? "true" : "false", t9 = selected ? 0 : -1, t10;
|
|
449
449
|
return $[22] !== fontSize || $[23] !== handleFocus || $[24] !== icon || $[25] !== id || $[26] !== label || $[27] !== onClick || $[28] !== padding || $[29] !== restProps || $[30] !== selected || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 ? (t10 = /* @__PURE__ */ jsx(Button, {
|
|
450
450
|
className: t7,
|
|
@@ -487,7 +487,7 @@ function TabList(props) {
|
|
|
487
487
|
event.key === "ArrowLeft" && setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs), event.key === "ArrowRight" && setFocusedIndex((prevIndex_0) => (prevIndex_0 + 1) % numTabs);
|
|
488
488
|
}, $[10] = numTabs, $[11] = t1);
|
|
489
489
|
let handleKeyDown = t1, t2;
|
|
490
|
-
$[12] === className ? t2 = $[13] : (t2 = clsx("fKaiaP eJIKXE bCEGXA hlTznM", className), $[12] = className, $[13] = t2);
|
|
490
|
+
$[12] === className ? t2 = $[13] : (t2 = clsx("u-fKaiaP u-eJIKXE u-bCEGXA u-hlTznM", className), $[12] = className, $[13] = t2);
|
|
491
491
|
let t3;
|
|
492
492
|
return $[14] !== handleKeyDown || $[15] !== ref || $[16] !== restProps || $[17] !== t2 || $[18] !== tabs ? (t3 = /* @__PURE__ */ jsx(Inline, {
|
|
493
493
|
className: t2,
|
|
@@ -730,7 +730,7 @@ function TreeGroup(props) {
|
|
|
730
730
|
children
|
|
731
731
|
}), $[4] = children, $[5] = restProps, $[6] = t1, $[7] = tree.gap, $[8] = t2) : t2 = $[8], t2;
|
|
732
732
|
}
|
|
733
|
-
const treeItem = "ZyINL VaYZP hYXSkP kyddSM igTsvP kyTYla duclHY BXTsx ihcTNF dRJpaF oWpmy hdUmmY", StyledTreeItem = /* @__PURE__ */ styled.li.withConfig({
|
|
733
|
+
const treeItem = "u-ZyINL u-VaYZP u-hYXSkP u-kyddSM u-igTsvP u-kyTYla u-duclHY u-BXTsx u-ihcTNF u-dRJpaF u-oWpmy u-hdUmmY", StyledTreeItem = /* @__PURE__ */ styled.li.withConfig({
|
|
734
734
|
displayName: "StyledTreeItem",
|
|
735
735
|
componentId: "sc-mgt2q1-0"
|
|
736
736
|
})(treeItemRootColorStyle), TreeItemBox = /* @__PURE__ */ styled.a.withConfig({
|
|
@@ -793,7 +793,7 @@ function TreeItem(props) {
|
|
|
793
793
|
size: fontSize,
|
|
794
794
|
weight,
|
|
795
795
|
children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, {
|
|
796
|
-
className: "fIJvmj",
|
|
796
|
+
className: "u-fIJvmj",
|
|
797
797
|
style: { transform: expanded ? "rotate(90deg)" : void 0 }
|
|
798
798
|
})
|
|
799
799
|
}), $[35] = IconComponent, $[36] = expanded, $[37] = fontSize, $[38] = muted, $[39] = weight, $[40] = t17) : t17 = $[40];
|
|
@@ -1047,7 +1047,7 @@ function responsiveAvatarSizeStyle(props) {
|
|
|
1047
1047
|
return { "--avatar-size": rem(avatarSize.size) };
|
|
1048
1048
|
});
|
|
1049
1049
|
}
|
|
1050
|
-
const StyledAvatar = /* @__PURE__ */ styled(/* @__PURE__ */ styled.div.attrs({ className: "jOHnOz gcUkTl fMVBjb ixvSSg kwLhwW emPzDJ eIsAcC hhRcrn iMJsxr hykRjY hdBYnA dRiciA eKhxNy igUxFW jKeppS ddjAuZ dYvYSB" }).withConfig({
|
|
1050
|
+
const StyledAvatar = /* @__PURE__ */ styled(/* @__PURE__ */ styled.div.attrs({ className: "u-jOHnOz u-gcUkTl u-fMVBjb u-ixvSSg u-kwLhwW u-emPzDJ u-eIsAcC u-hhRcrn u-iMJsxr u-hykRjY u-hdBYnA u-dRiciA u-eKhxNy u-igUxFW u-jKeppS u-ddjAuZ u-dYvYSB" }).withConfig({
|
|
1051
1051
|
displayName: "AvatarBase",
|
|
1052
1052
|
componentId: "sc-943qen-0"
|
|
1053
1053
|
})(avatarRootStyle)).withConfig({
|
|
@@ -1071,7 +1071,7 @@ function AvatarComponent(props) {
|
|
|
1071
1071
|
}, $[18] = onImageLoadError, $[19] = t5);
|
|
1072
1072
|
let handleImageError = t5, T0 = StyledAvatar, t6 = typeof as == "string" ? as : void 0, t8;
|
|
1073
1073
|
$[20] === color ? t8 = $[21] : (t8 = /* @__PURE__ */ jsx("div", {
|
|
1074
|
-
className: "kyGdCf ixvSSg kiKDyH bgTIyZ lhPceK hWgptE qbeer iFTChX dpkMvs fRJJGt fXXdBW dGSZft hCrTsA eTFVft bbpCZG entgPE eHFqYL iVKMrE fgylBq ktJvyW jAObRc fNiGDY jKggCm",
|
|
1074
|
+
className: "u-kyGdCf u-ixvSSg u-kiKDyH u-bgTIyZ u-lhPceK u-hWgptE u-qbeer u-iFTChX u-dpkMvs u-fRJJGt u-fXXdBW u-dGSZft u-hCrTsA u-eTFVft u-bbpCZG u-entgPE u-eHFqYL u-iVKMrE u-fgylBq u-ktJvyW u-jAObRc u-fNiGDY u-jKggCm",
|
|
1075
1075
|
children: /* @__PURE__ */ jsx("svg", {
|
|
1076
1076
|
width: "11",
|
|
1077
1077
|
height: "7",
|
|
@@ -1086,24 +1086,24 @@ function AvatarComponent(props) {
|
|
|
1086
1086
|
let t9;
|
|
1087
1087
|
$[22] !== __unstable_hideInnerStroke || $[23] !== avatarSize || $[24] !== handleImageError || $[25] !== imageFailed || $[26] !== src ? (t9 = !imageFailed && src && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
|
|
1088
1088
|
alt: "",
|
|
1089
|
-
className: "gHYZIR kwLhwW exIGLf emPzDJ hhRcrn gIVJpv",
|
|
1089
|
+
className: "u-gHYZIR u-kwLhwW u-exIGLf u-emPzDJ u-hhRcrn u-gIVJpv",
|
|
1090
1090
|
draggable: !1,
|
|
1091
1091
|
height: avatarSize.size,
|
|
1092
1092
|
onError: handleImageError,
|
|
1093
1093
|
src,
|
|
1094
1094
|
width: avatarSize.size
|
|
1095
1095
|
}), /* @__PURE__ */ jsxs("svg", {
|
|
1096
|
-
className: "gHYZIR kwLhwW kiKDyH cERSkX lhPceK qbeer hhRcrn",
|
|
1096
|
+
className: "u-gHYZIR u-kwLhwW u-kiKDyH u-cERSkX u-lhPceK u-qbeer u-hhRcrn",
|
|
1097
1097
|
viewBox: "0 0 2 2",
|
|
1098
1098
|
fill: "none",
|
|
1099
1099
|
children: [!__unstable_hideInnerStroke && /* @__PURE__ */ jsx("circle", {
|
|
1100
|
-
className: "iMJkVA ysDJT",
|
|
1100
|
+
className: "u-iMJkVA u-ysDJT",
|
|
1101
1101
|
cx: "1",
|
|
1102
1102
|
cy: "1",
|
|
1103
1103
|
r: "1",
|
|
1104
1104
|
vectorEffect: "non-scaling-stroke"
|
|
1105
1105
|
}), /* @__PURE__ */ jsx("circle", {
|
|
1106
|
-
className: "ggmhkl ksRPkh hxmycU fgUwLY",
|
|
1106
|
+
className: "u-ggmhkl u-ksRPkh u-hxmycU u-fgUwLY",
|
|
1107
1107
|
cx: "1",
|
|
1108
1108
|
cy: "1",
|
|
1109
1109
|
r: "1",
|
|
@@ -1111,7 +1111,7 @@ function AvatarComponent(props) {
|
|
|
1111
1111
|
})]
|
|
1112
1112
|
})] }), $[22] = __unstable_hideInnerStroke, $[23] = avatarSize, $[24] = handleImageError, $[25] = imageFailed, $[26] = src, $[27] = t9) : t9 = $[27];
|
|
1113
1113
|
let t10 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
|
|
1114
|
-
className: "fAtomh gHYZIR fuocjA ePwsZv bsGhWR dBwzdG cPyXJe diGfnu djbxbl",
|
|
1114
|
+
className: "u-fAtomh u-gHYZIR u-fuocjA u-ePwsZv u-bsGhWR u-dBwzdG u-cPyXJe u-diGfnu u-djbxbl",
|
|
1115
1115
|
children: /* @__PURE__ */ jsx(Label, {
|
|
1116
1116
|
as: "span",
|
|
1117
1117
|
size: size.map(_temp$2),
|
|
@@ -1162,7 +1162,7 @@ function _avatarCounterPaddingStyle(props) {
|
|
|
1162
1162
|
let { space } = getTheme_v2(props.theme);
|
|
1163
1163
|
return css`padding:0 ${rem(space[2])};`;
|
|
1164
1164
|
}
|
|
1165
|
-
const StyledAvatarCounter = /* @__PURE__ */ styled.div.attrs({ className: "fAtomh dNSLRW dupTko ixvSSg fIoZKR bsGhWR eIsAcC djbxbl" }).withConfig({
|
|
1165
|
+
const StyledAvatarCounter = /* @__PURE__ */ styled.div.attrs({ className: "u-fAtomh u-dNSLRW u-dupTko u-ixvSSg u-fIoZKR u-bsGhWR u-eIsAcC u-djbxbl" }).withConfig({
|
|
1166
1166
|
displayName: "StyledAvatarCounter",
|
|
1167
1167
|
componentId: "sc-nxxvbb-0"
|
|
1168
1168
|
})(_responsiveAvatarCounterSizeStyle, _avatarCounterPaddingStyle);
|
|
@@ -1215,7 +1215,7 @@ function AvatarStack(props) {
|
|
|
1215
1215
|
let children = Children.toArray(childrenProp).filter(isValidElement), maxLength = Math.max(maxLengthProp, 0), t10;
|
|
1216
1216
|
$[22] === sizeProp ? t10 = $[23] : (t10 = _getArrayProp(sizeProp), $[22] = sizeProp, $[23] = t10);
|
|
1217
1217
|
let size = t10, len = children.length, extraCount = len - (maxLength - 1), visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
|
|
1218
|
-
T0 = StyledAvatarStack, $[24] === className ? t2 = $[25] : (t2 = clsx("cbkwRf isxeDy cnjfpu", className), $[24] = className, $[25] = t2), t3 = "AvatarStack", t4 = restProps, t5 = ref, t6 = size, $[26] !== len || $[27] !== size ? (t7 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, {
|
|
1218
|
+
T0 = StyledAvatarStack, $[24] === className ? t2 = $[25] : (t2 = clsx("u-cbkwRf u-isxeDy u-cnjfpu", className), $[24] = className, $[25] = t2), t3 = "AvatarStack", t4 = restProps, t5 = ref, t6 = size, $[26] !== len || $[27] !== size ? (t7 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, {
|
|
1219
1219
|
count: len,
|
|
1220
1220
|
size
|
|
1221
1221
|
}) }), $[26] = len, $[27] = size, $[28] = t7) : t7 = $[28], $[29] !== extraCount || $[30] !== len || $[31] !== size ? (t8 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, {
|
|
@@ -1333,7 +1333,7 @@ function Checkbox(props) {
|
|
|
1333
1333
|
ref.current && (ref.current.indeterminate = indeterminate || !1);
|
|
1334
1334
|
}, t2 = [indeterminate], $[11] = indeterminate, $[12] = t1, $[13] = t2), useEffect(t1, t2), useCustomValidity(ref, customValidity);
|
|
1335
1335
|
let t3;
|
|
1336
|
-
$[14] === className ? t3 = $[15] : (t3 = clsx("gSxJLz emPzDJ", className), $[14] = className, $[15] = t3);
|
|
1336
|
+
$[14] === className ? t3 = $[15] : (t3 = clsx("u-gSxJLz u-emPzDJ", className), $[14] = className, $[15] = t3);
|
|
1337
1337
|
let t4 = !disabled && readOnly ? "" : void 0, t5 = customValidity ? "" : void 0, t6 = disabled || readOnly, t7;
|
|
1338
1338
|
$[16] !== checked || $[17] !== readOnly || $[18] !== restProps || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 ? (t7 = /* @__PURE__ */ jsx(Input$3, {
|
|
1339
1339
|
"data-read-only": t4,
|
|
@@ -1437,7 +1437,7 @@ function Radio(props) {
|
|
|
1437
1437
|
let ref = useRef(null), t0;
|
|
1438
1438
|
$[8] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[8] = t0) : t0 = $[8], useImperativeHandle(forwardedRef, t0), useCustomValidity(ref, customValidity);
|
|
1439
1439
|
let t1;
|
|
1440
|
-
$[9] === className ? t1 = $[10] : (t1 = clsx("emPzDJ cXmUGv", className), $[9] = className, $[10] = t1);
|
|
1440
|
+
$[9] === className ? t1 = $[10] : (t1 = clsx("u-emPzDJ u-cXmUGv", className), $[9] = className, $[10] = t1);
|
|
1441
1441
|
let t2 = !disabled && readOnly ? "" : void 0, t3 = customValidity ? "" : void 0, t4 = disabled || readOnly, t5;
|
|
1442
1442
|
$[11] !== readOnly || $[12] !== restProps || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 ? (t5 = /* @__PURE__ */ jsx(Input$2, {
|
|
1443
1443
|
"data-read-only": t2,
|
|
@@ -1563,7 +1563,7 @@ function Select(props) {
|
|
|
1563
1563
|
}), $[32] = padding, $[33] = t13, $[34] = t14) : t14 = $[34];
|
|
1564
1564
|
let t15;
|
|
1565
1565
|
return $[35] !== t11 || $[36] !== t14 ? (t15 = /* @__PURE__ */ jsxs("div", {
|
|
1566
|
-
className: "emPzDJ iQYtgN cXmUGv",
|
|
1566
|
+
className: "u-emPzDJ u-iQYtgN u-cXmUGv",
|
|
1567
1567
|
"data-ui": "Select",
|
|
1568
1568
|
children: [t11, t14]
|
|
1569
1569
|
}), $[35] = t11, $[36] = t14, $[37] = t15) : t15 = $[37], t15;
|
|
@@ -1580,13 +1580,13 @@ function switchThumbStyles(props) {
|
|
|
1580
1580
|
let { $indeterminate } = props, { input } = getTheme_v2(props.theme), trackWidth = input.switch.width, trackHeight = input.switch.height, trackPadding = input.switch.padding, size = trackHeight - input.switch.padding * 2, checkedOffset = trackWidth - trackPadding * 2 - size, indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding, checked = $indeterminate !== !0 && props.$checked === !0;
|
|
1581
1581
|
return css`left:${rem(trackPadding)};top:${rem(trackPadding)};height:${rem(size)};width:${rem(size)};border-radius:${rem(size / 2)};transition-duration:${input.switch.transitionDurationMs}ms;transition-timing-function:${input.switch.transitionTimingFunction};transform:translate3d(0,0,0);${checked && css`transform:translate3d(${checkedOffset}px,0,0);`} ${$indeterminate && css`transform:translate3d(${indeterminateOffset}px,0,0);`}`;
|
|
1582
1582
|
}
|
|
1583
|
-
const Representation = /* @__PURE__ */ styled.span.attrs({ className: "dJgWtv cERSkX emPzDJ kmCWMa bpuMrN dbSCHR dMOWAL dRmRBl lhNBpt iqwUak eKJNom dCrjkN yDftq gIVJpv" }).withConfig({
|
|
1583
|
+
const Representation = /* @__PURE__ */ styled.span.attrs({ className: "u-dJgWtv u-cERSkX u-emPzDJ u-kmCWMa u-bpuMrN u-dbSCHR u-dMOWAL u-dRmRBl u-lhNBpt u-iqwUak u-eKJNom u-dCrjkN u-yDftq u-gIVJpv" }).withConfig({
|
|
1584
1584
|
displayName: "Representation",
|
|
1585
1585
|
componentId: "sc-fbcjg3-0"
|
|
1586
|
-
})(switchRepresentationStyles), Track = /* @__PURE__ */ styled.span.attrs({ className: "indMik kiKDyH lhPceK qbeer gIVJpv" }).withConfig({
|
|
1586
|
+
})(switchRepresentationStyles), Track = /* @__PURE__ */ styled.span.attrs({ className: "u-indMik u-kiKDyH u-lhPceK u-qbeer u-gIVJpv" }).withConfig({
|
|
1587
1587
|
displayName: "Track",
|
|
1588
1588
|
componentId: "sc-fbcjg3-1"
|
|
1589
|
-
})(switchTrackStyles), Thumb = /* @__PURE__ */ styled.span.attrs({ className: "eHHXIg kecFSQ lhPceK bNSskR gIVJpv" }).withConfig({
|
|
1589
|
+
})(switchTrackStyles), Thumb = /* @__PURE__ */ styled.span.attrs({ className: "u-eHHXIg u-kecFSQ u-lhPceK u-bNSskR u-gIVJpv" }).withConfig({
|
|
1590
1590
|
displayName: "Thumb",
|
|
1591
1591
|
componentId: "sc-fbcjg3-2"
|
|
1592
1592
|
})(switchThumbStyles);
|
|
@@ -1607,10 +1607,10 @@ function Switch(props) {
|
|
|
1607
1607
|
ref.current && (ref.current.indeterminate = indeterminate || !1);
|
|
1608
1608
|
}, t2 = [indeterminate], $[10] = indeterminate, $[11] = t1, $[12] = t2), useEffect(t1, t2);
|
|
1609
1609
|
let t3;
|
|
1610
|
-
$[13] === className ? t3 = $[14] : (t3 = clsx("emPzDJ cXmUGv", className), $[13] = className, $[14] = t3);
|
|
1610
|
+
$[13] === className ? t3 = $[14] : (t3 = clsx("u-emPzDJ u-cXmUGv", className), $[13] = className, $[14] = t3);
|
|
1611
1611
|
let t4 = !disabled && readOnly ? "" : void 0, t5 = indeterminate !== !0 && checked, t6 = disabled || readOnly, t7;
|
|
1612
1612
|
$[15] !== restProps || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsx("input", {
|
|
1613
|
-
className: "kyGdCf ePwsZv kiKDyH jZsjHW bgTIyZ dFXmkO bnBrYd lhPceK hWgptE qbeer diGfnu dStxMA",
|
|
1613
|
+
className: "u-kyGdCf u-ePwsZv u-kiKDyH u-jZsjHW u-bgTIyZ u-dFXmkO u-bnBrYd u-lhPceK u-hWgptE u-qbeer u-diGfnu u-dStxMA",
|
|
1614
1614
|
"data-read-only": t4,
|
|
1615
1615
|
...restProps,
|
|
1616
1616
|
checked: t5,
|
|
@@ -1865,13 +1865,13 @@ function SrOnly(props) {
|
|
|
1865
1865
|
let $ = c(4), { as: t0, children, ref } = props, Component = t0 === void 0 ? "div" : t0, t1;
|
|
1866
1866
|
return $[0] !== Component || $[1] !== children || $[2] !== ref ? (t1 = /* @__PURE__ */ jsx(Component, {
|
|
1867
1867
|
"aria-hidden": !0,
|
|
1868
|
-
className: "krAvjf bLvdID fqYOpD lhPceK hRLrZa",
|
|
1868
|
+
className: "u-krAvjf u-bLvdID u-fqYOpD u-lhPceK u-hRLrZa",
|
|
1869
1869
|
"data-ui": "SrOnly",
|
|
1870
1870
|
ref,
|
|
1871
1871
|
children
|
|
1872
1872
|
}), $[0] = Component, $[1] = children, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
|
|
1873
1873
|
}
|
|
1874
|
-
const virtualListItem = "kiKDyH lhPceK hWgptE";
|
|
1874
|
+
const virtualListItem = "u-kiKDyH u-lhPceK u-hWgptE";
|
|
1875
1875
|
/**
|
|
1876
1876
|
* @beta
|
|
1877
1877
|
*/
|
|
@@ -1948,7 +1948,7 @@ function VirtualList(props) {
|
|
|
1948
1948
|
renderItem
|
|
1949
1949
|
}, $[28] = fromIndex, $[29] = gap, $[30] = getItemKey, $[31] = itemHeight, $[32] = items, $[33] = renderItem, $[34] = space, $[35] = toIndex, $[36] = t11) : t11 = $[36];
|
|
1950
1950
|
let children = useChildren(t11), Component = as, t12;
|
|
1951
|
-
$[37] === className ? t12 = $[38] : (t12 = clsx("emPzDJ", className), $[37] = className, $[38] = t12);
|
|
1951
|
+
$[37] === className ? t12 = $[38] : (t12 = clsx("u-emPzDJ", className), $[37] = className, $[38] = t12);
|
|
1952
1952
|
let t13;
|
|
1953
1953
|
$[39] === height ? t13 = $[40] : (t13 = { height }, $[39] = height, $[40] = t13);
|
|
1954
1954
|
let t14;
|