@sanity/ui 2.0.0-alpha.25 → 2.0.0-alpha.26
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/index.d.ts +21 -2
- package/dist/index.esm.js +280 -226
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +280 -226
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/dialog/dialog.tsx +14 -5
- package/src/components/dialog/styles.ts +39 -0
- package/src/primitives/tooltip/conditionalWrapper.tsx +15 -0
- package/src/primitives/tooltip/tooltip.tsx +54 -23
- package/src/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +3 -1
package/dist/index.js
CHANGED
|
@@ -4690,13 +4690,13 @@ function responsiveInputPaddingIconRightStyle(props) {
|
|
|
4690
4690
|
$iconRight: true
|
|
4691
4691
|
});
|
|
4692
4692
|
}
|
|
4693
|
-
var __freeze$
|
|
4694
|
-
var __defProp$
|
|
4695
|
-
var __template$
|
|
4696
|
-
value: __freeze$
|
|
4693
|
+
var __freeze$E = Object.freeze;
|
|
4694
|
+
var __defProp$F = Object.defineProperty;
|
|
4695
|
+
var __template$E = (cooked, raw) => __freeze$E(__defProp$F(cooked, "raw", {
|
|
4696
|
+
value: __freeze$E(raw || cooked.slice())
|
|
4697
4697
|
}));
|
|
4698
|
-
var _a$
|
|
4699
|
-
const ROOT_STYLE = styled.css(_a$
|
|
4698
|
+
var _a$E, _b$o, _c$d;
|
|
4699
|
+
const ROOT_STYLE = styled.css(_a$E || (_a$E = __template$E(["\n &:not([hidden]) {\n display: flex;\n }\n\n align-items: center;\n"])));
|
|
4700
4700
|
function textInputRootStyle() {
|
|
4701
4701
|
return ROOT_STYLE;
|
|
4702
4702
|
}
|
|
@@ -4709,7 +4709,7 @@ function textInputBaseStyle(props) {
|
|
|
4709
4709
|
} = props;
|
|
4710
4710
|
const font = theme.sanity.fonts.text;
|
|
4711
4711
|
const color = theme.sanity.color.input;
|
|
4712
|
-
return styled.css(_b$
|
|
4712
|
+
return styled.css(_b$o || (_b$o = __template$E(["\n appearance: none;\n background: none;\n border: 0;\n border-radius: 0;\n outline: none;\n width: 100%;\n box-sizing: border-box;\n font-family: ", ";\n font-weight: ", ";\n margin: 0;\n position: relative;\n z-index: 1;\n display: block;\n\n /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-text-fill-color: var(--input-fg-color) !important;\n transition: background-color 5000s;\n transition-delay: 86400s /* 24h */;\n }\n\n /* &:is(textarea) */\n &[data-as='textarea'] {\n resize: none;\n }\n\n color: var(--input-fg-color);\n\n &::placeholder {\n color: var(--input-placeholder-color);\n }\n\n &[data-scheme='", "'][data-tone='", "'] {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n\n /* enabled */\n &:not(:invalid):not(:disabled):not(:read-only) {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n\n /* disabled */\n &:not(:invalid):disabled {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n\n /* invalid */\n &:invalid {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n\n /* readOnly */\n &:read-only {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n }\n "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
|
|
4713
4713
|
}
|
|
4714
4714
|
function textInputFontSizeStyle(props) {
|
|
4715
4715
|
const {
|
|
@@ -4743,7 +4743,7 @@ function textInputRepresentationStyle(props) {
|
|
|
4743
4743
|
focusRing
|
|
4744
4744
|
} = input.text;
|
|
4745
4745
|
const color = theme.sanity.color.input;
|
|
4746
|
-
return styled.css(_c$d || (_c$d = __template$
|
|
4746
|
+
return styled.css(_c$d || (_c$d = __template$E(["\n --input-box-shadow: none;\n\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n pointer-events: none;\n z-index: 0;\n\n background-color: var(--card-bg-color);\n box-shadow: var(--input-box-shadow);\n\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n\n &[data-scheme='", "'][data-tone='", "'] {\n --card-bg-color: ", ";\n --card-fg-color: ", ";\n\n /* enabled */\n *:not(:disabled) + &[data-border] {\n --input-box-shadow: ", ";\n }\n\n /* invalid */\n *:not(:disabled):invalid + & {\n --card-bg-color: ", ";\n --card-fg-color: ", ";\n\n &[data-border] {\n --input-box-shadow: ", ";\n }\n }\n\n /* focused */\n *:not(:disabled):focus + & {\n &[data-border] {\n --input-box-shadow: ", ";\n }\n\n &:not([data-border]) {\n --input-box-shadow: ", ";\n }\n }\n\n /* disabled */\n *:disabled + & {\n --card-bg-color: ", " !important;\n --card-fg-color: ", " !important;\n\n &[data-border] {\n --input-box-shadow: ", ";\n }\n }\n\n /* readOnly */\n *:read-only + & {\n --card-bg-color: ", " !important;\n --card-fg-color: ", " !important;\n }\n\n /* hovered */\n @media (hover: hover) {\n *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n --card-bg-color: ", ";\n --card-fg-color: ", ";\n }\n\n *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n --input-box-shadow: ", ";\n }\n }\n }\n "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
|
|
4747
4747
|
color: color.default.enabled.border,
|
|
4748
4748
|
width: input.border.width
|
|
4749
4749
|
}), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
|
|
@@ -4821,12 +4821,12 @@ function responsiveShadowStyle(props) {
|
|
|
4821
4821
|
} = theme.sanity;
|
|
4822
4822
|
return _responsive(media, props.$shadow, shadow => shadowStyle(shadows[shadow]));
|
|
4823
4823
|
}
|
|
4824
|
-
var __freeze$
|
|
4825
|
-
var __defProp$
|
|
4826
|
-
var __template$
|
|
4827
|
-
value: __freeze$
|
|
4824
|
+
var __freeze$D = Object.freeze;
|
|
4825
|
+
var __defProp$E = Object.defineProperty;
|
|
4826
|
+
var __template$D = (cooked, raw) => __freeze$D(__defProp$E(cooked, "raw", {
|
|
4827
|
+
value: __freeze$D(raw || cooked.slice())
|
|
4828
4828
|
}));
|
|
4829
|
-
var _a$
|
|
4829
|
+
var _a$D, _b$n, _c$c;
|
|
4830
4830
|
function textBaseStyle(props) {
|
|
4831
4831
|
const {
|
|
4832
4832
|
$accent,
|
|
@@ -4836,16 +4836,16 @@ function textBaseStyle(props) {
|
|
|
4836
4836
|
const {
|
|
4837
4837
|
weights
|
|
4838
4838
|
} = theme.sanity.fonts.text;
|
|
4839
|
-
return styled.css(_c$c || (_c$c = __template$
|
|
4839
|
+
return styled.css(_c$c || (_c$c = __template$D(["\n color: var(--card-fg-color);\n\n ", "\n\n ", "\n\n & code {\n font-family: ", ";\n border-radius: 1px;\n background-color: var(--card-code-bg-color);\n color: var(--card-code-fg-color);\n }\n\n & a {\n text-decoration: none;\n border-radius: 1px;\n color: var(--card-link-color);\n outline: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n &:focus {\n box-shadow:\n 0 0 0 1px var(--card-bg-color),\n 0 0 0 3px var(--card-focus-ring-color);\n }\n\n &:focus:not(:focus-visible) {\n box-shadow: none;\n }\n }\n\n & strong {\n font-weight: ", ";\n }\n\n & svg {\n /* Certain popular CSS libraries changes the defaults for SVG display */\n /* Make sure SVGs are rendered as inline elements */\n display: inline;\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n color: var(--card-icon-color);\n }\n "])), $accent && styled.css(_a$D || (_a$D = __template$D(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_b$n || (_b$n = __template$D(["\n color: var(--card-muted-fg-color);\n "]))), theme.sanity.fonts.code.family, weights.bold);
|
|
4840
4840
|
}
|
|
4841
|
-
var __freeze$
|
|
4842
|
-
var __defProp$
|
|
4843
|
-
var __template$
|
|
4844
|
-
value: __freeze$
|
|
4841
|
+
var __freeze$C = Object.freeze;
|
|
4842
|
+
var __defProp$D = Object.defineProperty;
|
|
4843
|
+
var __template$C = (cooked, raw) => __freeze$C(__defProp$D(cooked, "raw", {
|
|
4844
|
+
value: __freeze$C(raw || cooked.slice())
|
|
4845
4845
|
}));
|
|
4846
|
-
var _a$
|
|
4846
|
+
var _a$C;
|
|
4847
4847
|
const Root$E = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
|
|
4848
|
-
const SpanWithTextOverflow$2 = styled__default.default.span(_a$
|
|
4848
|
+
const SpanWithTextOverflow$2 = styled__default.default.span(_a$C || (_a$C = __template$C(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n overflow: clip;\n"])));
|
|
4849
4849
|
const Text = react.forwardRef(function Text2(props, ref) {
|
|
4850
4850
|
const {
|
|
4851
4851
|
accent = false,
|
|
@@ -5148,12 +5148,12 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
|
|
|
5148
5148
|
})]
|
|
5149
5149
|
});
|
|
5150
5150
|
});
|
|
5151
|
-
var __freeze$
|
|
5152
|
-
var __defProp$
|
|
5153
|
-
var __template$
|
|
5154
|
-
value: __freeze$
|
|
5151
|
+
var __freeze$B = Object.freeze;
|
|
5152
|
+
var __defProp$C = Object.defineProperty;
|
|
5153
|
+
var __template$B = (cooked, raw) => __freeze$B(__defProp$C(cooked, "raw", {
|
|
5154
|
+
value: __freeze$B(raw || cooked.slice())
|
|
5155
5155
|
}));
|
|
5156
|
-
var _a$
|
|
5156
|
+
var _a$B;
|
|
5157
5157
|
function _responsiveAvatarCounterSizeStyle(props) {
|
|
5158
5158
|
const {
|
|
5159
5159
|
theme
|
|
@@ -5176,7 +5176,7 @@ function _avatarCounterBaseStyle(props) {
|
|
|
5176
5176
|
const {
|
|
5177
5177
|
theme
|
|
5178
5178
|
} = props;
|
|
5179
|
-
return styled.css(_a$
|
|
5179
|
+
return styled.css(_a$B || (_a$B = __template$B(["\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n user-select: none;\n color: inherit;\n color: var(--card-fg-color);\n background: var(--card-bg-color);\n box-shadow:\n 0 0 0 1px var(--card-bg-color),\n inset 0 0 0 1px var(--card-hairline-hard-color);\n padding: 0 ", ";\n\n &:not([hidden]) {\n display: flex;\n }\n "])), rem(theme.sanity.space[2]));
|
|
5180
5180
|
}
|
|
5181
5181
|
const Root$C = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
|
|
5182
5182
|
const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
|
|
@@ -5202,13 +5202,13 @@ function childrenToElementArray(children) {
|
|
|
5202
5202
|
const childrenArray = Array.isArray(children) ? children : [children];
|
|
5203
5203
|
return childrenArray.filter(node => ReactIs.isElement(node) || ReactIs.isFragment(node) || typeof node === "string");
|
|
5204
5204
|
}
|
|
5205
|
-
var __freeze$
|
|
5206
|
-
var __defProp$
|
|
5207
|
-
var __template$
|
|
5208
|
-
value: __freeze$
|
|
5205
|
+
var __freeze$A = Object.freeze;
|
|
5206
|
+
var __defProp$B = Object.defineProperty;
|
|
5207
|
+
var __template$A = (cooked, raw) => __freeze$A(__defProp$B(cooked, "raw", {
|
|
5208
|
+
value: __freeze$A(raw || cooked.slice())
|
|
5209
5209
|
}));
|
|
5210
|
-
var _a$
|
|
5211
|
-
const BASE_STYLES = styled.css(_a$
|
|
5210
|
+
var _a$A;
|
|
5211
|
+
const BASE_STYLES = styled.css(_a$A || (_a$A = __template$A(["\n white-space: nowrap;\n\n & > div {\n vertical-align: top;\n\n &:not([hidden]) {\n display: inline-block;\n }\n }\n"])));
|
|
5212
5212
|
function avatarStackStyle() {
|
|
5213
5213
|
return BASE_STYLES;
|
|
5214
5214
|
}
|
|
@@ -5403,14 +5403,14 @@ const Flex = react.forwardRef(function Flex2(props, ref) {
|
|
|
5403
5403
|
})
|
|
5404
5404
|
);
|
|
5405
5405
|
});
|
|
5406
|
-
var __freeze$
|
|
5407
|
-
var __defProp$
|
|
5408
|
-
var __template$
|
|
5409
|
-
value: __freeze$
|
|
5406
|
+
var __freeze$z = Object.freeze;
|
|
5407
|
+
var __defProp$A = Object.defineProperty;
|
|
5408
|
+
var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
|
|
5409
|
+
value: __freeze$z(raw || cooked.slice())
|
|
5410
5410
|
}));
|
|
5411
|
-
var _a$
|
|
5412
|
-
const rotate$1 = styled.keyframes(_a$
|
|
5413
|
-
const Root$x = styled__default.default(Text)(_b$
|
|
5411
|
+
var _a$z, _b$m;
|
|
5412
|
+
const rotate$1 = styled.keyframes(_a$z || (_a$z = __template$z(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
5413
|
+
const Root$x = styled__default.default(Text)(_b$m || (_b$m = __template$z(["\n & > span > svg {\n animation: ", " 500ms linear infinite;\n }\n"])), rotate$1);
|
|
5414
5414
|
const Spinner = react.forwardRef(function Spinner2(props, ref) {
|
|
5415
5415
|
return /* @__PURE__ */jsxRuntime.jsx(Root$x, {
|
|
5416
5416
|
"data-ui": "Spinner",
|
|
@@ -5450,17 +5450,17 @@ function _colorVarsStyle(base, color) {
|
|
|
5450
5450
|
"--card-hairline-hard-color": color.border
|
|
5451
5451
|
};
|
|
5452
5452
|
}
|
|
5453
|
-
var __freeze$
|
|
5454
|
-
var __defProp$
|
|
5455
|
-
var __template$
|
|
5456
|
-
value: __freeze$
|
|
5453
|
+
var __freeze$y = Object.freeze;
|
|
5454
|
+
var __defProp$z = Object.defineProperty;
|
|
5455
|
+
var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
|
|
5456
|
+
value: __freeze$y(raw || cooked.slice())
|
|
5457
5457
|
}));
|
|
5458
|
-
var _a$
|
|
5458
|
+
var _a$y, _b$l;
|
|
5459
5459
|
function buttonBaseStyles(_ref24) {
|
|
5460
5460
|
let {
|
|
5461
5461
|
$width
|
|
5462
5462
|
} = _ref24;
|
|
5463
|
-
return styled.css(_b$
|
|
5463
|
+
return styled.css(_b$l || (_b$l = __template$y(["\n -webkit-font-smoothing: inherit;\n appearance: none;\n display: inline-flex;\n align-items: center;\n font: inherit;\n border: 0;\n outline: none;\n user-select: none;\n text-decoration: none;\n border: 0;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n text-align: left;\n position: relative;\n\n ", "\n\n & > span {\n display: block;\n flex: 1;\n min-width: 0;\n border-radius: inherit;\n }\n\n &::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n "])), $width === "fill" && styled.css(_a$y || (_a$y = __template$y(["\n width: -moz-available;\n width: -webkit-fill-available;\n width: stretch;\n "]))));
|
|
5464
5464
|
}
|
|
5465
5465
|
const buttonTheme = {
|
|
5466
5466
|
border: {
|
|
@@ -5520,14 +5520,14 @@ function buttonColorStyles(props) {
|
|
|
5520
5520
|
}
|
|
5521
5521
|
}, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b2.root].filter(Boolean);
|
|
5522
5522
|
}
|
|
5523
|
-
var __freeze$
|
|
5524
|
-
var __defProp$
|
|
5525
|
-
var __template$
|
|
5526
|
-
value: __freeze$
|
|
5523
|
+
var __freeze$x = Object.freeze;
|
|
5524
|
+
var __defProp$y = Object.defineProperty;
|
|
5525
|
+
var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
|
|
5526
|
+
value: __freeze$x(raw || cooked.slice())
|
|
5527
5527
|
}));
|
|
5528
|
-
var _a$
|
|
5528
|
+
var _a$x;
|
|
5529
5529
|
const Root$w = styled__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
|
|
5530
|
-
const LoadingBox = styled__default.default.div(_a$
|
|
5530
|
+
const LoadingBox = styled__default.default.div(_a$x || (_a$x = __template$x(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--card-bg-color);\n border-radius: inherit;\n z-index: 1;\n box-shadow: inherit;\n"])));
|
|
5531
5531
|
const Button = react.forwardRef(function Button2(props, ref) {
|
|
5532
5532
|
const {
|
|
5533
5533
|
children,
|
|
@@ -5623,12 +5623,12 @@ const Button = react.forwardRef(function Button2(props, ref) {
|
|
|
5623
5623
|
})]
|
|
5624
5624
|
});
|
|
5625
5625
|
});
|
|
5626
|
-
var __freeze$
|
|
5627
|
-
var __defProp$
|
|
5628
|
-
var __template$
|
|
5629
|
-
value: __freeze$
|
|
5626
|
+
var __freeze$w = Object.freeze;
|
|
5627
|
+
var __defProp$x = Object.defineProperty;
|
|
5628
|
+
var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", {
|
|
5629
|
+
value: __freeze$w(raw || cooked.slice())
|
|
5630
5630
|
}));
|
|
5631
|
-
var _a$
|
|
5631
|
+
var _a$w, _b$k, _c$b;
|
|
5632
5632
|
function cardStyle(props) {
|
|
5633
5633
|
return [cardBaseStyle(props), cardColorStyle(props)];
|
|
5634
5634
|
}
|
|
@@ -5638,7 +5638,7 @@ function cardBaseStyle(props) {
|
|
|
5638
5638
|
theme
|
|
5639
5639
|
} = props;
|
|
5640
5640
|
const space = theme.sanity.space;
|
|
5641
|
-
return styled.css(_b$
|
|
5641
|
+
return styled.css(_b$k || (_b$k = __template$w(["\n ", "\n\n &[data-as='button'] {\n -webkit-font-smoothing: inherit;\n appearance: none;\n outline: none;\n font: inherit;\n text-align: inherit;\n border: 0;\n width: -moz-available;\n width: -webkit-fill-available;\n width: stretch;\n }\n\n /* &:is(a) */\n &[data-as='a'] {\n outline: none;\n text-decoration: none;\n }\n\n /* &:is(pre) */\n &[data-as='pre'] {\n font: inherit;\n }\n "])), $checkered && styled.css(_a$w || (_a$w = __template$w(["\n background-size: ", "px ", "px;\n background-position: 50% 50%;\n background-image: var(--card-bg-image);\n "])), space[3], space[3]));
|
|
5642
5642
|
}
|
|
5643
5643
|
function cardColorStyle(props) {
|
|
5644
5644
|
var _a2, _b2;
|
|
@@ -5659,7 +5659,7 @@ function cardColorStyle(props) {
|
|
|
5659
5659
|
width: 0,
|
|
5660
5660
|
color: "var(--card-border-color)"
|
|
5661
5661
|
};
|
|
5662
|
-
return styled.css(_c$b || (_c$b = __template$
|
|
5662
|
+
return styled.css(_c$b || (_c$b = __template$w(["\n color-scheme: ", ";\n\n ", "\n\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n\n /* &:is(button) */\n &[data-as='button'] {\n --card-focus-ring-box-shadow: none;\n\n cursor: default;\n box-shadow: var(--card-focus-ring-box-shadow);\n\n &:disabled {\n ", "\n }\n\n &:not(:disabled) {\n &[data-pressed] {\n ", "\n }\n\n &[data-selected] {\n ", "\n }\n\n @media (hover: hover) {\n &:not([data-pressed]):not([data-selected]) {\n &[data-hovered],\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n }\n }\n\n &:focus {\n --card-focus-ring-box-shadow: ", ";\n }\n\n &:focus:not(:focus-visible) {\n --card-focus-ring-box-shadow: ", ";\n }\n }\n }\n\n /* &:is(a) */\n &[data-as='a'] {\n cursor: pointer;\n box-shadow: var(--card-focus-ring-box-shadow);\n\n &[data-disabled] {\n ", "\n }\n\n &:not([data-disabled]) {\n &[data-pressed] {\n ", "\n }\n\n &[data-selected] {\n ", "\n }\n\n @media (hover: hover) {\n &:not([data-pressed]):not([data-selected]) {\n &[data-hovered],\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n }\n }\n\n &:focus {\n --card-focus-ring-box-shadow: ", ";\n }\n\n &:focus:not(:focus-visible) {\n --card-focus-ring-box-shadow: ", ";\n }\n }\n }\n\n ", "\n "])), dark ? "dark" : "light", _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
|
|
5663
5663
|
base,
|
|
5664
5664
|
border,
|
|
5665
5665
|
focusRing
|
|
@@ -5719,14 +5719,14 @@ const Card = react.forwardRef(function Card2(props, ref) {
|
|
|
5719
5719
|
})
|
|
5720
5720
|
});
|
|
5721
5721
|
});
|
|
5722
|
-
var __freeze$
|
|
5723
|
-
var __defProp$
|
|
5724
|
-
var __template$
|
|
5725
|
-
value: __freeze$
|
|
5722
|
+
var __freeze$v = Object.freeze;
|
|
5723
|
+
var __defProp$w = Object.defineProperty;
|
|
5724
|
+
var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
|
|
5725
|
+
value: __freeze$v(raw || cooked.slice())
|
|
5726
5726
|
}));
|
|
5727
|
-
var _a$
|
|
5727
|
+
var _a$v, _b$j;
|
|
5728
5728
|
function checkboxBaseStyles() {
|
|
5729
|
-
return styled.css(_a$
|
|
5729
|
+
return styled.css(_a$v || (_a$v = __template$v(["\n position: relative;\n display: inline-block;\n "])));
|
|
5730
5730
|
}
|
|
5731
5731
|
function inputElementStyles(props) {
|
|
5732
5732
|
const {
|
|
@@ -5740,7 +5740,7 @@ function inputElementStyles(props) {
|
|
|
5740
5740
|
const {
|
|
5741
5741
|
focusRing
|
|
5742
5742
|
} = input.checkbox;
|
|
5743
|
-
return styled.css(_b$
|
|
5743
|
+
return styled.css(_b$j || (_b$j = __template$v(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n outline: none;\n opacity: 0;\n z-index: 1;\n padding: 0;\n margin: 0;\n\n & + span {\n position: relative;\n display: block;\n height: ", ";\n width: ", ";\n box-sizing: border-box;\n box-shadow: ", ";\n border-radius: ", ";\n line-height: 1;\n background-color: ", ";\n\n & > svg {\n display: block;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n\n & > path {\n vector-effect: non-scaling-stroke;\n stroke-width: 1.2 !important;\n }\n }\n }\n &:checked + span {\n background: ", ";\n box-shadow: ", ";\n color: ", ";\n }\n\n /* focus */\n &:not(:disabled):focus:focus-visible + span {\n box-shadow: ", ";\n }\n\n /* focus when checked - uses a different offset */\n &:not(:disabled):focus:focus-visible&:checked + span {\n box-shadow: ", ";\n }\n\n &[data-error] + span {\n background-color: ", ";\n box-shadow: ", ";\n color: ", ";\n }\n &[data-error]&:checked + span {\n background-color: ", ";\n color: ", ";\n }\n &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {\n box-shadow: ", ";\n }\n\n &:disabled + span {\n background-color: ", ";\n box-shadow: ", ";\n color: ", ";\n }\n &:disabled&:checked + span {\n background-color: ", ";\n }\n\n &[data-read-only] + span {\n background-color: ", ";\n box-shadow: ", ";\n color: ", ";\n }\n\n &[data-read-only]&:checked + span {\n background-color: ", ";\n }\n\n &:checked + span > svg:first-child {\n opacity: 1;\n }\n &:indeterminate + span > svg:last-child {\n opacity: 1;\n }\n "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
|
|
5744
5744
|
color: color.default.enabled.border,
|
|
5745
5745
|
width: input.border.width
|
|
5746
5746
|
}), rem(radius[2]), color.default.enabled.bg, color.default.enabled.bg2, focusRingBorderStyle({
|
|
@@ -5811,12 +5811,12 @@ const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
|
|
|
5811
5811
|
})]
|
|
5812
5812
|
});
|
|
5813
5813
|
});
|
|
5814
|
-
var __freeze$
|
|
5815
|
-
var __defProp$
|
|
5816
|
-
var __template$
|
|
5817
|
-
value: __freeze$
|
|
5814
|
+
var __freeze$u = Object.freeze;
|
|
5815
|
+
var __defProp$v = Object.defineProperty;
|
|
5816
|
+
var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
|
|
5817
|
+
value: __freeze$u(raw || cooked.slice())
|
|
5818
5818
|
}));
|
|
5819
|
-
var _a$
|
|
5819
|
+
var _a$u;
|
|
5820
5820
|
function codeSyntaxHighlightingStyle(_ref25) {
|
|
5821
5821
|
let {
|
|
5822
5822
|
theme
|
|
@@ -5934,7 +5934,7 @@ function codeSyntaxHighlightingStyle(_ref25) {
|
|
|
5934
5934
|
};
|
|
5935
5935
|
}
|
|
5936
5936
|
function codeBaseStyle() {
|
|
5937
|
-
return styled.css(_a$
|
|
5937
|
+
return styled.css(_a$u || (_a$u = __template$u(["\n color: var(--card-code-fg-color);\n\n & code {\n font-family: inherit;\n\n &.refractor .token {\n ", "\n }\n }\n\n & a {\n color: inherit;\n text-decoration: underline;\n border-radius: 1px;\n }\n\n & svg {\n /* Certain popular CSS libraries changes the defaults for SVG display */\n /* Make sure SVGs are rendered as inline elements */\n display: inline;\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), codeSyntaxHighlightingStyle);
|
|
5938
5938
|
}
|
|
5939
5939
|
const Root$t = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
|
|
5940
5940
|
const Code = react.forwardRef(function Code2(props, ref) {
|
|
@@ -6028,28 +6028,28 @@ const Grid = react.forwardRef(function Grid2(props, ref) {
|
|
|
6028
6028
|
children
|
|
6029
6029
|
});
|
|
6030
6030
|
});
|
|
6031
|
-
var __freeze$
|
|
6032
|
-
var __defProp$
|
|
6033
|
-
var __template$
|
|
6034
|
-
value: __freeze$
|
|
6031
|
+
var __freeze$t = Object.freeze;
|
|
6032
|
+
var __defProp$u = Object.defineProperty;
|
|
6033
|
+
var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
|
|
6034
|
+
value: __freeze$t(raw || cooked.slice())
|
|
6035
6035
|
}));
|
|
6036
|
-
var _a$
|
|
6036
|
+
var _a$t, _b$i, _c$a;
|
|
6037
6037
|
function headingBaseStyle(props) {
|
|
6038
6038
|
const {
|
|
6039
6039
|
$accent,
|
|
6040
6040
|
$muted,
|
|
6041
6041
|
theme
|
|
6042
6042
|
} = props;
|
|
6043
|
-
return styled.css(_c$a || (_c$a = __template$
|
|
6043
|
+
return styled.css(_c$a || (_c$a = __template$t(["\n ", "\n\n ", "\n\n & code {\n font-family: ", ";\n border-radius: 1px;\n }\n\n & a {\n text-decoration: none;\n border-radius: 1px;\n color: var(--card-link-color);\n outline: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n &:focus {\n box-shadow:\n 0 0 0 1px var(--card-bg-color),\n 0 0 0 3px var(--card-focus-ring-color);\n }\n\n &:focus:not(:focus-visible) {\n box-shadow: none;\n }\n }\n\n & svg {\n /* Certain popular CSS libraries changes the defaults for SVG display */\n /* Make sure SVGs are rendered as inline elements */\n display: inline;\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), $accent && styled.css(_a$t || (_a$t = __template$t(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_b$i || (_b$i = __template$t(["\n color: var(--card-muted-fg-color);\n "]))), theme.sanity.fonts.code.family);
|
|
6044
6044
|
}
|
|
6045
|
-
var __freeze$
|
|
6046
|
-
var __defProp$
|
|
6047
|
-
var __template$
|
|
6048
|
-
value: __freeze$
|
|
6045
|
+
var __freeze$s = Object.freeze;
|
|
6046
|
+
var __defProp$t = Object.defineProperty;
|
|
6047
|
+
var __template$s = (cooked, raw) => __freeze$s(__defProp$t(cooked, "raw", {
|
|
6048
|
+
value: __freeze$s(raw || cooked.slice())
|
|
6049
6049
|
}));
|
|
6050
|
-
var _a$
|
|
6050
|
+
var _a$s;
|
|
6051
6051
|
const Root$q = styled__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
|
|
6052
|
-
const SpanWithTextOverflow$1 = styled__default.default.span(_a$
|
|
6052
|
+
const SpanWithTextOverflow$1 = styled__default.default.span(_a$s || (_a$s = __template$s(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n overflow: clip;\n"])));
|
|
6053
6053
|
const Heading = react.forwardRef(function Heading2(props, ref) {
|
|
6054
6054
|
const {
|
|
6055
6055
|
accent = false,
|
|
@@ -6127,14 +6127,14 @@ const Inline = react.forwardRef(function Inline2(props, ref) {
|
|
|
6127
6127
|
children
|
|
6128
6128
|
});
|
|
6129
6129
|
});
|
|
6130
|
-
var __freeze$
|
|
6131
|
-
var __defProp$
|
|
6132
|
-
var __template$
|
|
6133
|
-
value: __freeze$
|
|
6130
|
+
var __freeze$r = Object.freeze;
|
|
6131
|
+
var __defProp$s = Object.defineProperty;
|
|
6132
|
+
var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
|
|
6133
|
+
value: __freeze$r(raw || cooked.slice())
|
|
6134
6134
|
}));
|
|
6135
|
-
var _a$
|
|
6135
|
+
var _a$r;
|
|
6136
6136
|
function kbdStyle() {
|
|
6137
|
-
return styled.css(_a$
|
|
6137
|
+
return styled.css(_a$r || (_a$r = __template$r(["\n background: var(--card-bg2-color);\n font: inherit;\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
|
|
6138
6138
|
}
|
|
6139
6139
|
const Root$o = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
|
|
6140
6140
|
const KBD = react.forwardRef(function KBD2(props, ref) {
|
|
@@ -6163,12 +6163,12 @@ const KBD = react.forwardRef(function KBD2(props, ref) {
|
|
|
6163
6163
|
})
|
|
6164
6164
|
});
|
|
6165
6165
|
});
|
|
6166
|
-
var __freeze$
|
|
6167
|
-
var __defProp$
|
|
6168
|
-
var __template$
|
|
6169
|
-
value: __freeze$
|
|
6166
|
+
var __freeze$q = Object.freeze;
|
|
6167
|
+
var __defProp$r = Object.defineProperty;
|
|
6168
|
+
var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", {
|
|
6169
|
+
value: __freeze$q(raw || cooked.slice())
|
|
6170
6170
|
}));
|
|
6171
|
-
var _a$
|
|
6171
|
+
var _a$q, _b$h, _c$9;
|
|
6172
6172
|
function labelBaseStyle(props) {
|
|
6173
6173
|
const {
|
|
6174
6174
|
$accent,
|
|
@@ -6178,16 +6178,16 @@ function labelBaseStyle(props) {
|
|
|
6178
6178
|
const {
|
|
6179
6179
|
fonts
|
|
6180
6180
|
} = theme.sanity;
|
|
6181
|
-
return styled.css(_c$9 || (_c$9 = __template$
|
|
6181
|
+
return styled.css(_c$9 || (_c$9 = __template$q(["\n text-transform: uppercase;\n\n ", "\n\n ", "\n\n & code {\n font-family: ", ";\n border-radius: 1px;\n }\n\n & a {\n text-decoration: none;\n border-radius: 1px;\n }\n\n & svg {\n /* Certain popular CSS libraries changes the defaults for SVG display */\n /* Make sure SVGs are rendered as inline elements */\n display: inline;\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), $accent && styled.css(_a$q || (_a$q = __template$q(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_b$h || (_b$h = __template$q(["\n color: var(--card-muted-fg-color);\n "]))), fonts.code.family);
|
|
6182
6182
|
}
|
|
6183
|
-
var __freeze$
|
|
6184
|
-
var __defProp$
|
|
6185
|
-
var __template$
|
|
6186
|
-
value: __freeze$
|
|
6183
|
+
var __freeze$p = Object.freeze;
|
|
6184
|
+
var __defProp$q = Object.defineProperty;
|
|
6185
|
+
var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", {
|
|
6186
|
+
value: __freeze$p(raw || cooked.slice())
|
|
6187
6187
|
}));
|
|
6188
|
-
var _a$
|
|
6188
|
+
var _a$p;
|
|
6189
6189
|
const Root$n = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
|
|
6190
|
-
const SpanWithTextOverflow = styled__default.default.span(_a$
|
|
6190
|
+
const SpanWithTextOverflow = styled__default.default.span(_a$p || (_a$p = __template$p(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n overflow: clip;\n"])));
|
|
6191
6191
|
const Label = react.forwardRef(function Label2(props, ref) {
|
|
6192
6192
|
const {
|
|
6193
6193
|
accent,
|
|
@@ -6298,8 +6298,8 @@ const ElementQuery = react.forwardRef(function ElementQuery2(props, ref) {
|
|
|
6298
6298
|
children
|
|
6299
6299
|
});
|
|
6300
6300
|
});
|
|
6301
|
-
var __defProp$
|
|
6302
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp$
|
|
6301
|
+
var __defProp$p = Object.defineProperty;
|
|
6302
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp$p(obj, key, {
|
|
6303
6303
|
enumerable: true,
|
|
6304
6304
|
configurable: true,
|
|
6305
6305
|
writable: true,
|
|
@@ -6675,13 +6675,13 @@ function PortalProvider(props) {
|
|
|
6675
6675
|
children
|
|
6676
6676
|
});
|
|
6677
6677
|
}
|
|
6678
|
-
var __freeze$
|
|
6679
|
-
var __defProp$
|
|
6680
|
-
var __template$
|
|
6681
|
-
value: __freeze$
|
|
6678
|
+
var __freeze$o = Object.freeze;
|
|
6679
|
+
var __defProp$o = Object.defineProperty;
|
|
6680
|
+
var __template$o = (cooked, raw) => __freeze$o(__defProp$o(cooked, "raw", {
|
|
6681
|
+
value: __freeze$o(raw || cooked.slice())
|
|
6682
6682
|
}));
|
|
6683
|
-
var _a$
|
|
6684
|
-
const Root$l = styled__default.default.div(_a$
|
|
6683
|
+
var _a$o;
|
|
6684
|
+
const Root$l = styled__default.default.div(_a$o || (_a$o = __template$o(["\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n overflow: hidden;\n overflow: clip;\n"])));
|
|
6685
6685
|
const SrOnly = react.forwardRef(function SrOnly2(props, ref) {
|
|
6686
6686
|
const {
|
|
6687
6687
|
as,
|
|
@@ -6695,14 +6695,14 @@ const SrOnly = react.forwardRef(function SrOnly2(props, ref) {
|
|
|
6695
6695
|
children
|
|
6696
6696
|
});
|
|
6697
6697
|
});
|
|
6698
|
-
var __freeze$
|
|
6699
|
-
var __defProp$
|
|
6700
|
-
var __template$
|
|
6701
|
-
value: __freeze$
|
|
6698
|
+
var __freeze$n = Object.freeze;
|
|
6699
|
+
var __defProp$n = Object.defineProperty;
|
|
6700
|
+
var __template$n = (cooked, raw) => __freeze$n(__defProp$n(cooked, "raw", {
|
|
6701
|
+
value: __freeze$n(raw || cooked.slice())
|
|
6702
6702
|
}));
|
|
6703
|
-
var _a$
|
|
6704
|
-
const Root$k = styled__default.default.div(_a$
|
|
6705
|
-
const ItemWrapper = styled__default.default.div(_b$
|
|
6703
|
+
var _a$n, _b$g;
|
|
6704
|
+
const Root$k = styled__default.default.div(_a$n || (_a$n = __template$n(["\n position: relative;\n"])));
|
|
6705
|
+
const ItemWrapper = styled__default.default.div(_b$g || (_b$g = __template$n(["\n position: absolute;\n left: 0;\n right: 0;\n"])));
|
|
6706
6706
|
const VirtualList = react.forwardRef(function VirtualList2(props, ref) {
|
|
6707
6707
|
const {
|
|
6708
6708
|
as = "div",
|
|
@@ -6925,15 +6925,15 @@ function calcMaxWidth(params) {
|
|
|
6925
6925
|
}
|
|
6926
6926
|
return Math.min(currentWidth != null ? currentWidth : Infinity, (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2);
|
|
6927
6927
|
}
|
|
6928
|
-
var __freeze$
|
|
6929
|
-
var __defProp$
|
|
6930
|
-
var __template$
|
|
6931
|
-
value: __freeze$
|
|
6928
|
+
var __freeze$m = Object.freeze;
|
|
6929
|
+
var __defProp$m = Object.defineProperty;
|
|
6930
|
+
var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
|
|
6931
|
+
value: __freeze$m(raw || cooked.slice())
|
|
6932
6932
|
}));
|
|
6933
|
-
var _a$
|
|
6934
|
-
const Root$j = styled__default.default.div(_a$
|
|
6935
|
-
const BorderPath = styled__default.default.path(_b$
|
|
6936
|
-
const ShapePath = styled__default.default.path(_c$8 || (_c$8 = __template$
|
|
6933
|
+
var _a$m, _b$f, _c$8;
|
|
6934
|
+
const Root$j = styled__default.default.div(_a$m || (_a$m = __template$m(["\n position: absolute;\n pointer-events: none;\n width: ", "px;\n height: ", "px;\n fill: none;\n\n :empty + & {\n display: none;\n }\n\n & > svg {\n display: block;\n transform-origin: ", "px ", "px;\n }\n\n [data-placement^='top'] > & {\n bottom: -", "px;\n }\n\n [data-placement^='right'] > & {\n left: -", "px;\n\n & > svg {\n transform: rotate(90deg);\n }\n }\n\n [data-placement^='left'] > & {\n right: -", "px;\n\n & > svg {\n transform: rotate(-90deg);\n }\n }\n\n [data-placement^='bottom'] > & {\n top: -", "px;\n\n & > svg {\n transform: rotate(180deg);\n }\n }\n"])), DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH);
|
|
6935
|
+
const BorderPath = styled__default.default.path(_b$f || (_b$f = __template$m(["\n fill: var(--card-shadow-outline-color);\n"])));
|
|
6936
|
+
const ShapePath = styled__default.default.path(_c$8 || (_c$8 = __template$m(["\n fill: var(--card-bg-color);\n"])));
|
|
6937
6937
|
const PopoverArrow = react.forwardRef(function PopoverArrow2(props, ref) {
|
|
6938
6938
|
return /* @__PURE__ */jsxRuntime.jsx(Root$j, {
|
|
6939
6939
|
"data-ui": "Popover__arrow",
|
|
@@ -7263,14 +7263,14 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
|
|
|
7263
7263
|
});
|
|
7264
7264
|
}));
|
|
7265
7265
|
Popover.displayName = "Popover";
|
|
7266
|
-
var __freeze$
|
|
7267
|
-
var __defProp$
|
|
7268
|
-
var __template$
|
|
7269
|
-
value: __freeze$
|
|
7266
|
+
var __freeze$l = Object.freeze;
|
|
7267
|
+
var __defProp$l = Object.defineProperty;
|
|
7268
|
+
var __template$l = (cooked, raw) => __freeze$l(__defProp$l(cooked, "raw", {
|
|
7269
|
+
value: __freeze$l(raw || cooked.slice())
|
|
7270
7270
|
}));
|
|
7271
|
-
var _a$
|
|
7271
|
+
var _a$l, _b$e;
|
|
7272
7272
|
function radioBaseStyle() {
|
|
7273
|
-
return styled.css(_a$
|
|
7273
|
+
return styled.css(_a$l || (_a$l = __template$l(["\n position: relative;\n\n &:not([hidden]) {\n display: inline-block;\n }\n\n &[data-read-only] {\n outline: 1px solid red;\n }\n "])));
|
|
7274
7274
|
}
|
|
7275
7275
|
function inputElementStyle(props) {
|
|
7276
7276
|
const {
|
|
@@ -7284,7 +7284,7 @@ function inputElementStyle(props) {
|
|
|
7284
7284
|
} = input.radio;
|
|
7285
7285
|
const color = theme.sanity.color.input;
|
|
7286
7286
|
const dist = (input.radio.size - input.radio.markSize) / 2;
|
|
7287
|
-
return styled.css(_b$
|
|
7287
|
+
return styled.css(_b$e || (_b$e = __template$l(["\n appearance: none;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n height: 100%;\n width: 100%;\n outline: none;\n z-index: 1;\n padding: 0;\n margin: 0;\n border-radius: ", ";\n border: none;\n\n /* enabled */\n & + span {\n display: block;\n position: relative;\n height: ", ";\n width: ", ";\n border-radius: ", ";\n background: ", ";\n box-shadow: ", ";\n\n &::after {\n content: '';\n position: absolute;\n top: ", ";\n left: ", ";\n height: ", ";\n width: ", ";\n border-radius: ", ";\n background: ", ";\n opacity: 0;\n }\n }\n\n /* focused */\n &:not(:disabled):focus + span {\n box-shadow: ", ";\n }\n\n &:not(:disabled):focus:not(:focus-visible) + span {\n box-shadow: ", ";\n }\n\n &:checked + span::after {\n opacity: 1;\n }\n\n /* customValidity */\n &[data-error] + span {\n background-color: ", ";\n box-shadow: ", ";\n &::after {\n background: ", ";\n }\n }\n\n /* read only */\n &[data-read-only] + span {\n box-shadow: 0 0 0 1px ", ";\n background: ", ";\n\n &::after {\n background: ", ";\n }\n }\n\n /* disabled */\n &:not([data-read-only]):disabled + span {\n box-shadow: 0 0 0 1px ", ";\n background: ", ";\n\n &::after {\n background: ", ";\n }\n }\n "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
|
|
7288
7288
|
color: color.default.enabled.border,
|
|
7289
7289
|
width: input.border.width
|
|
7290
7290
|
}), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.bg2, focusRingStyle({
|
|
@@ -7329,21 +7329,21 @@ const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
|
|
|
7329
7329
|
}), /* @__PURE__ */jsxRuntime.jsx("span", {})]
|
|
7330
7330
|
});
|
|
7331
7331
|
});
|
|
7332
|
-
var __freeze$
|
|
7333
|
-
var __defProp$
|
|
7334
|
-
var __template$
|
|
7335
|
-
value: __freeze$
|
|
7332
|
+
var __freeze$k = Object.freeze;
|
|
7333
|
+
var __defProp$k = Object.defineProperty;
|
|
7334
|
+
var __template$k = (cooked, raw) => __freeze$k(__defProp$k(cooked, "raw", {
|
|
7335
|
+
value: __freeze$k(raw || cooked.slice())
|
|
7336
7336
|
}));
|
|
7337
|
-
var _a$
|
|
7337
|
+
var _a$k, _b$d, _c$7, _d$5;
|
|
7338
7338
|
function rootStyle() {
|
|
7339
|
-
return styled.css(_a$
|
|
7339
|
+
return styled.css(_a$k || (_a$k = __template$k(["\n position: relative;\n width: -moz-available;\n width: -webkit-fill-available;\n width: stretch;\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
|
|
7340
7340
|
}
|
|
7341
7341
|
function inputBaseStyle(props) {
|
|
7342
7342
|
const {
|
|
7343
7343
|
theme
|
|
7344
7344
|
} = props;
|
|
7345
7345
|
const font = theme.sanity.fonts.text;
|
|
7346
|
-
return styled.css(_b$
|
|
7346
|
+
return styled.css(_b$d || (_b$d = __template$k(["\n -webkit-font-smoothing: antialiased;\n appearance: none;\n border: 0;\n font-family: ", ";\n color: inherit;\n width: 100%;\n outline: none;\n margin: 0;\n\n &:disabled {\n opacity: 1;\n }\n "])), font.family);
|
|
7347
7347
|
}
|
|
7348
7348
|
function inputColorStyle(props) {
|
|
7349
7349
|
const {
|
|
@@ -7356,7 +7356,7 @@ function inputColorStyle(props) {
|
|
|
7356
7356
|
focusRing
|
|
7357
7357
|
} = input.select;
|
|
7358
7358
|
const color = theme.sanity.color.input;
|
|
7359
|
-
return styled.css(_c$7 || (_c$7 = __template$
|
|
7359
|
+
return styled.css(_c$7 || (_c$7 = __template$k(["\n /* enabled */\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n\n /* hovered */\n @media (hover: hover) {\n &:not(:disabled):hover {\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n }\n }\n\n /* focused */\n &:not(:disabled):focus {\n box-shadow: ", ";\n }\n\n /* read-only */\n &[data-read-only] {\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n }\n\n /* disabled */\n &:not([data-read-only]):disabled {\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n }\n "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
|
|
7360
7360
|
color: color.default.enabled.border,
|
|
7361
7361
|
width: input.border.width
|
|
7362
7362
|
}), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
|
|
@@ -7400,7 +7400,7 @@ function iconBoxStyle(props) {
|
|
|
7400
7400
|
theme
|
|
7401
7401
|
} = props;
|
|
7402
7402
|
const color = theme.sanity.color.input;
|
|
7403
|
-
return styled.css(_d$5 || (_d$5 = __template$
|
|
7403
|
+
return styled.css(_d$5 || (_d$5 = __template$k(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n\n /* enabled */\n --card-fg-color: ", ";\n\n /* hover */\n @media (hover: hover) {\n select:not(disabled):not(:read-only):hover + && {\n --card-fg-color: ", ";\n }\n }\n\n /* disabled */\n select:disabled + && {\n --card-fg-color: ", ";\n }\n\n /* read-only */\n select[data-read-only] + && {\n --card-fg-color: ", ";\n }\n "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
|
|
7404
7404
|
}
|
|
7405
7405
|
const selectStyle = {
|
|
7406
7406
|
root: rootStyle,
|
|
@@ -7487,17 +7487,17 @@ const Stack = react.forwardRef(function Stack2(props, ref) {
|
|
|
7487
7487
|
ref
|
|
7488
7488
|
});
|
|
7489
7489
|
});
|
|
7490
|
-
var __freeze$
|
|
7491
|
-
var __defProp$
|
|
7492
|
-
var __template$
|
|
7493
|
-
value: __freeze$
|
|
7490
|
+
var __freeze$j = Object.freeze;
|
|
7491
|
+
var __defProp$j = Object.defineProperty;
|
|
7492
|
+
var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
|
|
7493
|
+
value: __freeze$j(raw || cooked.slice())
|
|
7494
7494
|
}));
|
|
7495
|
-
var _a$
|
|
7495
|
+
var _a$j, _b$c, _c$6, _d$4, _e$2, _f$2, _g;
|
|
7496
7496
|
function switchBaseStyles() {
|
|
7497
|
-
return styled.css(_a$
|
|
7497
|
+
return styled.css(_a$j || (_a$j = __template$j(["\n position: relative;\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
|
|
7498
7498
|
}
|
|
7499
7499
|
function switchInputStyles() {
|
|
7500
|
-
return styled.css(_b$
|
|
7500
|
+
return styled.css(_b$c || (_b$c = __template$j(["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0;\n height: 100%;\n width: 100%;\n outline: none;\n padding: 0;\n margin: 0;\n\n /* Place the input element above the representation element */\n z-index: 1;\n "])));
|
|
7501
7501
|
}
|
|
7502
7502
|
function switchRepresentationStyles(props) {
|
|
7503
7503
|
const {
|
|
@@ -7510,7 +7510,7 @@ function switchRepresentationStyles(props) {
|
|
|
7510
7510
|
focusRing
|
|
7511
7511
|
} = input.switch;
|
|
7512
7512
|
const color = theme.sanity.color.input;
|
|
7513
|
-
return styled.css(_c$6 || (_c$6 = __template$
|
|
7513
|
+
return styled.css(_c$6 || (_c$6 = __template$j(["\n --switch-bg-color: ", ";\n --switch-fg-color: ", ";\n --switch-box-shadow: none;\n\n &:not([hidden]) {\n display: block;\n }\n position: relative;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n\n /* Make sure it\u2019s not possible to interact with the wrapper element */\n pointer-events: none;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n box-shadow: var(--switch-box-shadow);\n border-radius: inherit;\n }\n\n /* Focus styles */\n input:focus + && {\n --switch-box-shadow: ", ";\n }\n\n input:focus:not(:focus-visible) + && {\n --switch-box-shadow: none;\n }\n\n input:checked + && {\n --switch-bg-color: var(--card-focus-ring-color);\n --switch-fg-color: ", ";\n }\n\n @media (hover: hover) {\n input:not(:disabled):hover + && {\n --switch-bg-color: ", ";\n --switch-fg-color: ", ";\n }\n\n input:not(:disabled):checked:hover + && {\n --switch-bg-color: var(--card-focus-ring-color);\n --switch-fg-color: ", ";\n }\n }\n\n input:not([data-read-only]):disabled + && {\n --switch-bg-color: ", ";\n --switch-fg-color: ", ";\n }\n\n input[data-read-only]:disabled + && {\n --switch-bg-color: ", ";\n --switch-fg-color: ", ";\n }\n "])), color.default.enabled.border, color.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
|
|
7514
7514
|
focusRing
|
|
7515
7515
|
}), color.default.enabled.bg, color.default.hovered.border, color.default.hovered.bg, color.default.enabled.bg, color.default.disabled.border, color.default.disabled.bg, color.default.readOnly.border, color.default.readOnly.bg);
|
|
7516
7516
|
}
|
|
@@ -7521,7 +7521,7 @@ function switchTrackStyles(props) {
|
|
|
7521
7521
|
const {
|
|
7522
7522
|
input
|
|
7523
7523
|
} = theme.sanity;
|
|
7524
|
-
return styled.css(_d$4 || (_d$4 = __template$
|
|
7524
|
+
return styled.css(_d$4 || (_d$4 = __template$j(["\n &:not([hidden]) {\n display: block;\n }\n background-color: var(--switch-bg-color);\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
|
|
7525
7525
|
}
|
|
7526
7526
|
function switchThumbStyles(props) {
|
|
7527
7527
|
const {
|
|
@@ -7538,7 +7538,7 @@ function switchThumbStyles(props) {
|
|
|
7538
7538
|
const checkedOffset = trackWidth - trackPadding * 2 - size;
|
|
7539
7539
|
const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
|
|
7540
7540
|
const checked = $indeterminate !== true && props.$checked === true;
|
|
7541
|
-
return styled.css(_g || (_g = __template$
|
|
7541
|
+
return styled.css(_g || (_g = __template$j(["\n &:not([hidden]) {\n display: block;\n }\n position: absolute;\n left: ", ";\n top: ", ";\n height: ", ";\n width: ", ";\n border-radius: ", ";\n transition-property: transform;\n transition-duration: ", "ms;\n transition-timing-function: ", ";\n background: var(--switch-fg-color);\n transform: translate3d(0, 0, 0);\n box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);\n\n ", "\n\n ", "\n "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && styled.css(_e$2 || (_e$2 = __template$j(["\n transform: translate3d(", "px, 0, 0);\n "])), checkedOffset), $indeterminate && styled.css(_f$2 || (_f$2 = __template$j(["\n transform: translate3d(", "px, 0, 0);\n "])), indeterminateOffset));
|
|
7542
7542
|
}
|
|
7543
7543
|
const Root$e = styled__default.default.span(switchBaseStyles);
|
|
7544
7544
|
const Input$2 = styled__default.default.input(switchInputStyles);
|
|
@@ -7582,14 +7582,14 @@ const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
|
|
|
7582
7582
|
})]
|
|
7583
7583
|
});
|
|
7584
7584
|
});
|
|
7585
|
-
var __freeze$
|
|
7586
|
-
var __defProp$
|
|
7587
|
-
var __template$
|
|
7588
|
-
value: __freeze$
|
|
7585
|
+
var __freeze$i = Object.freeze;
|
|
7586
|
+
var __defProp$i = Object.defineProperty;
|
|
7587
|
+
var __template$i = (cooked, raw) => __freeze$i(__defProp$i(cooked, "raw", {
|
|
7588
|
+
value: __freeze$i(raw || cooked.slice())
|
|
7589
7589
|
}));
|
|
7590
|
-
var _a$
|
|
7590
|
+
var _a$i;
|
|
7591
7591
|
const Root$d = styled__default.default.span(textInputRootStyle);
|
|
7592
|
-
const InputRoot$1 = styled__default.default.span(_a$
|
|
7592
|
+
const InputRoot$1 = styled__default.default.span(_a$i || (_a$i = __template$i(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
|
|
7593
7593
|
const Input$1 = styled__default.default.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
|
|
7594
7594
|
const Presentation$1 = styled__default.default.div(responsiveRadiusStyle, textInputRepresentationStyle);
|
|
7595
7595
|
const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
|
|
@@ -7633,30 +7633,30 @@ const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
|
|
|
7633
7633
|
})
|
|
7634
7634
|
});
|
|
7635
7635
|
});
|
|
7636
|
-
var __freeze$
|
|
7637
|
-
var __defProp$
|
|
7638
|
-
var __template$
|
|
7639
|
-
value: __freeze$
|
|
7636
|
+
var __freeze$h = Object.freeze;
|
|
7637
|
+
var __defProp$h = Object.defineProperty;
|
|
7638
|
+
var __template$h = (cooked, raw) => __freeze$h(__defProp$h(cooked, "raw", {
|
|
7639
|
+
value: __freeze$h(raw || cooked.slice())
|
|
7640
7640
|
}));
|
|
7641
|
-
var _a$
|
|
7641
|
+
var _a$h, _b$b, _c$5, _d$3, _e$1, _f$1;
|
|
7642
7642
|
const CLEAR_BUTTON_BOX_STYLE = {
|
|
7643
7643
|
zIndex: 2
|
|
7644
7644
|
};
|
|
7645
7645
|
const Root$c = styled__default.default(Card).attrs({
|
|
7646
7646
|
forwardedAs: "span"
|
|
7647
7647
|
})(textInputRootStyle);
|
|
7648
|
-
const InputRoot = styled__default.default.span(_a$
|
|
7648
|
+
const InputRoot = styled__default.default.span(_a$h || (_a$h = __template$h(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
|
|
7649
7649
|
const Prefix = styled__default.default(Card).attrs({
|
|
7650
7650
|
forwardedAs: "span"
|
|
7651
|
-
})(_b$
|
|
7651
|
+
})(_b$b || (_b$b = __template$h(["\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n & > span {\n display: block;\n margin: -1px;\n }\n"])));
|
|
7652
7652
|
const Suffix = styled__default.default(Card).attrs({
|
|
7653
7653
|
forwardedAs: "span"
|
|
7654
|
-
})(_c$5 || (_c$5 = __template$
|
|
7654
|
+
})(_c$5 || (_c$5 = __template$h(["\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n & > span {\n display: block;\n margin: -1px;\n }\n"])));
|
|
7655
7655
|
const Input = styled__default.default.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
|
|
7656
7656
|
const Presentation = styled__default.default.span(responsiveRadiusStyle, textInputRepresentationStyle);
|
|
7657
|
-
const LeftBox = styled__default.default(Box)(_d$3 || (_d$3 = __template$
|
|
7658
|
-
const RightBox = styled__default.default(Box)(_e$1 || (_e$1 = __template$
|
|
7659
|
-
const RightCard = styled__default.default(Card)(_f$1 || (_f$1 = __template$
|
|
7657
|
+
const LeftBox = styled__default.default(Box)(_d$3 || (_d$3 = __template$h(["\n position: absolute;\n top: 0;\n left: 0;\n"])));
|
|
7658
|
+
const RightBox = styled__default.default(Box)(_e$1 || (_e$1 = __template$h(["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
7659
|
+
const RightCard = styled__default.default(Card)(_f$1 || (_f$1 = __template$h(["\n background-color: transparent;\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
7660
7660
|
const TextInputClearButton = styled__default.default(Button)({
|
|
7661
7661
|
"&:not([hidden])": {
|
|
7662
7662
|
display: "block"
|
|
@@ -7824,6 +7824,17 @@ function useDelayedState(initialState) {
|
|
|
7824
7824
|
}, []);
|
|
7825
7825
|
return [state, onStateChange];
|
|
7826
7826
|
}
|
|
7827
|
+
function ConditionalWrapper(_ref27) {
|
|
7828
|
+
let {
|
|
7829
|
+
children,
|
|
7830
|
+
condition,
|
|
7831
|
+
wrapper
|
|
7832
|
+
} = _ref27;
|
|
7833
|
+
if (!condition) {
|
|
7834
|
+
return children;
|
|
7835
|
+
}
|
|
7836
|
+
return wrapper(children);
|
|
7837
|
+
}
|
|
7827
7838
|
const DEFAULT_TOOLTIP_DISTANCE = 4;
|
|
7828
7839
|
const DEFAULT_TOOLTIP_PADDING = 4;
|
|
7829
7840
|
const DEFAULT_FALLBACK_PLACEMENTS = {
|
|
@@ -7840,15 +7851,15 @@ const DEFAULT_FALLBACK_PLACEMENTS = {
|
|
|
7840
7851
|
"right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
|
|
7841
7852
|
"right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
|
|
7842
7853
|
};
|
|
7843
|
-
var __freeze$
|
|
7844
|
-
var __defProp$
|
|
7845
|
-
var __template$
|
|
7846
|
-
value: __freeze$
|
|
7854
|
+
var __freeze$g = Object.freeze;
|
|
7855
|
+
var __defProp$g = Object.defineProperty;
|
|
7856
|
+
var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
|
|
7857
|
+
value: __freeze$g(raw || cooked.slice())
|
|
7847
7858
|
}));
|
|
7848
|
-
var _a$
|
|
7849
|
-
const Root$b = styled__default.default.div(_a$
|
|
7850
|
-
const Border = styled__default.default.path(_b$
|
|
7851
|
-
const Shape = styled__default.default.path(_c$4 || (_c$4 = __template$
|
|
7859
|
+
var _a$g, _b$a, _c$4;
|
|
7860
|
+
const Root$b = styled__default.default.div(_a$g || (_a$g = __template$g(["\n position: absolute;\n pointer-events: none;\n width: 15px;\n height: 15px;\n fill: none;\n\n :empty + & {\n display: none;\n }\n\n & > svg {\n display: block;\n transform-origin: 7.5px 7.5px;\n }\n\n /* position: absolute;\n width: 15px;\n height: 15px;\n fill: none;\n\n :empty + & {\n display: none;\n }\n\n & > svg {\n &:not([hidden]) {\n display: block;\n }\n transform-origin: 7.5px 7.5px;\n } */\n\n [data-placement^='top'] > & {\n bottom: -27px;\n }\n\n [data-placement^='right'] > & {\n left: -27px;\n\n & > svg {\n transform: rotate(90deg);\n }\n }\n\n [data-placement^='left'] > & {\n right: -27px;\n\n & > svg {\n transform: rotate(-90deg);\n }\n }\n\n [data-placement^='bottom'] > & {\n top: -27px;\n\n & > svg {\n transform: rotate(180deg);\n }\n }\n"])));
|
|
7861
|
+
const Border = styled__default.default.path(_b$a || (_b$a = __template$g(["\n fill: var(--card-shadow-outline-color);\n"])));
|
|
7862
|
+
const Shape = styled__default.default.path(_c$4 || (_c$4 = __template$g(["\n fill: var(--card-bg-color);\n"])));
|
|
7852
7863
|
const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
|
|
7853
7864
|
const {
|
|
7854
7865
|
...restProps
|
|
@@ -7899,16 +7910,16 @@ function TooltipDelayGroupProvider(props) {
|
|
|
7899
7910
|
children
|
|
7900
7911
|
});
|
|
7901
7912
|
}
|
|
7902
|
-
var __freeze$
|
|
7903
|
-
var __defProp$
|
|
7904
|
-
var __template$
|
|
7905
|
-
value: __freeze$
|
|
7913
|
+
var __freeze$f = Object.freeze;
|
|
7914
|
+
var __defProp$f = Object.defineProperty;
|
|
7915
|
+
var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
|
|
7916
|
+
value: __freeze$f(raw || cooked.slice())
|
|
7906
7917
|
}));
|
|
7907
|
-
var _a$
|
|
7908
|
-
const Root$a = styled__default.default(Layer)(_a$
|
|
7918
|
+
var _a$f;
|
|
7919
|
+
const Root$a = styled__default.default(Layer)(_a$f || (_a$f = __template$f(["\n pointer-events: none;\n max-width: ", "px;\n"])), _ref28 => {
|
|
7909
7920
|
let {
|
|
7910
7921
|
$maxWidth
|
|
7911
|
-
} =
|
|
7922
|
+
} = _ref28;
|
|
7912
7923
|
return $maxWidth;
|
|
7913
7924
|
});
|
|
7914
7925
|
const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
|
|
@@ -7929,6 +7940,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
|
|
|
7929
7940
|
shadow = 2,
|
|
7930
7941
|
zOffset = (_c = theme.sanity.layer) == null ? void 0 : _c.tooltip.zOffset,
|
|
7931
7942
|
delay,
|
|
7943
|
+
animate = false,
|
|
7932
7944
|
...restProps
|
|
7933
7945
|
} = props;
|
|
7934
7946
|
const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
|
|
@@ -8118,38 +8130,68 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
|
|
|
8118
8130
|
style: floatingStyles,
|
|
8119
8131
|
zOffset,
|
|
8120
8132
|
$maxWidth: tooltipWidth,
|
|
8121
|
-
children: /* @__PURE__ */jsxRuntime.
|
|
8122
|
-
|
|
8123
|
-
|
|
8124
|
-
|
|
8125
|
-
|
|
8126
|
-
|
|
8127
|
-
|
|
8128
|
-
|
|
8129
|
-
|
|
8130
|
-
|
|
8131
|
-
|
|
8133
|
+
children: /* @__PURE__ */jsxRuntime.jsx(ConditionalWrapper, {
|
|
8134
|
+
condition: animate,
|
|
8135
|
+
wrapper: children => /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
|
|
8136
|
+
initial: {
|
|
8137
|
+
opacity: 0.5,
|
|
8138
|
+
scale: 0.95
|
|
8139
|
+
},
|
|
8140
|
+
animate: {
|
|
8141
|
+
opacity: 1,
|
|
8142
|
+
scale: 1
|
|
8143
|
+
},
|
|
8144
|
+
exit: {
|
|
8145
|
+
opacity: 0,
|
|
8146
|
+
scale: 0.95,
|
|
8147
|
+
transition: {
|
|
8148
|
+
duration: 0.4,
|
|
8149
|
+
type: "spring"
|
|
8150
|
+
}
|
|
8151
|
+
},
|
|
8152
|
+
children
|
|
8153
|
+
}),
|
|
8154
|
+
children: /* @__PURE__ */jsxRuntime.jsxs(Card, {
|
|
8155
|
+
"data-ui": "Tooltip__card",
|
|
8156
|
+
"data-placement": placement,
|
|
8157
|
+
padding,
|
|
8158
|
+
radius: 3,
|
|
8159
|
+
scheme,
|
|
8160
|
+
shadow,
|
|
8161
|
+
children: [content, arrowProp && /* @__PURE__ */jsxRuntime.jsx(TooltipArrow, {
|
|
8162
|
+
ref: setArrow,
|
|
8163
|
+
style: arrowStyle
|
|
8164
|
+
})]
|
|
8165
|
+
})
|
|
8132
8166
|
})
|
|
8133
8167
|
});
|
|
8134
8168
|
return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
8135
|
-
children: [child,
|
|
8136
|
-
|
|
8137
|
-
|
|
8169
|
+
children: [child, /* @__PURE__ */jsxRuntime.jsx(ConditionalWrapper, {
|
|
8170
|
+
condition: animate,
|
|
8171
|
+
wrapper: children => /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
|
|
8172
|
+
children
|
|
8173
|
+
}),
|
|
8174
|
+
children: showTooltip && /* @__PURE__ */jsxRuntime.jsx(ConditionalWrapper, {
|
|
8175
|
+
condition: !!portalProp,
|
|
8176
|
+
wrapper: children => /* @__PURE__ */jsxRuntime.jsx(Portal, {
|
|
8177
|
+
__unstable_name: typeof portalProp === "string" ? portalProp : void 0,
|
|
8178
|
+
children
|
|
8179
|
+
}),
|
|
8138
8180
|
children: root
|
|
8139
|
-
})
|
|
8181
|
+
})
|
|
8140
8182
|
})]
|
|
8141
8183
|
});
|
|
8142
8184
|
});
|
|
8143
|
-
var __freeze$
|
|
8144
|
-
var __defProp$
|
|
8145
|
-
var __template$
|
|
8146
|
-
value: __freeze$
|
|
8185
|
+
var __freeze$e = Object.freeze;
|
|
8186
|
+
var __defProp$e = Object.defineProperty;
|
|
8187
|
+
var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
|
|
8188
|
+
value: __freeze$e(raw || cooked.slice())
|
|
8147
8189
|
}));
|
|
8148
|
-
var _a$
|
|
8149
|
-
const Root$9 = styled__default.default.div(_a$
|
|
8150
|
-
const ListBox = styled__default.default(Box)(_b$
|
|
8151
|
-
const rotate = styled.keyframes(_c$3 || (_c$3 = __template$
|
|
8152
|
-
const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_d$2 || (_d$2 = __template$
|
|
8190
|
+
var _a$e, _b$9, _c$3, _d$2;
|
|
8191
|
+
const Root$9 = styled__default.default.div(_a$e || (_a$e = __template$e(["\n line-height: 0;\n"])));
|
|
8192
|
+
const ListBox = styled__default.default(Box)(_b$9 || (_b$9 = __template$e(["\n & > ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n"])));
|
|
8193
|
+
const rotate = styled.keyframes(_c$3 || (_c$3 = __template$e(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
8194
|
+
const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_d$2 || (_d$2 = __template$e(["\n animation: ", " 500ms linear infinite;\n"])), rotate);
|
|
8153
8195
|
function AutocompleteOption(props) {
|
|
8154
8196
|
const {
|
|
8155
8197
|
children,
|
|
@@ -8294,10 +8336,10 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
|
|
|
8294
8336
|
query,
|
|
8295
8337
|
value
|
|
8296
8338
|
} = state;
|
|
8297
|
-
const defaultRenderOption = react.useCallback(
|
|
8339
|
+
const defaultRenderOption = react.useCallback(_ref29 => {
|
|
8298
8340
|
let {
|
|
8299
8341
|
value: value2
|
|
8300
|
-
} =
|
|
8342
|
+
} = _ref29;
|
|
8301
8343
|
return /* @__PURE__ */jsxRuntime.jsx(Card, {
|
|
8302
8344
|
"data-as": "button",
|
|
8303
8345
|
padding: paddingProp,
|
|
@@ -8673,14 +8715,14 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
|
|
|
8673
8715
|
});
|
|
8674
8716
|
});
|
|
8675
8717
|
const Autocomplete = InnerAutocomplete;
|
|
8676
|
-
var __freeze$
|
|
8677
|
-
var __defProp$
|
|
8678
|
-
var __template$
|
|
8679
|
-
value: __freeze$
|
|
8718
|
+
var __freeze$d = Object.freeze;
|
|
8719
|
+
var __defProp$d = Object.defineProperty;
|
|
8720
|
+
var __template$d = (cooked, raw) => __freeze$d(__defProp$d(cooked, "raw", {
|
|
8721
|
+
value: __freeze$d(raw || cooked.slice())
|
|
8680
8722
|
}));
|
|
8681
|
-
var _a$
|
|
8682
|
-
const Root$8 = styled__default.default.ol(_a$
|
|
8683
|
-
const ExpandButton = styled__default.default(Button)(_b$
|
|
8723
|
+
var _a$d, _b$8;
|
|
8724
|
+
const Root$8 = styled__default.default.ol(_a$d || (_a$d = __template$d(["\n margin: 0;\n padding: 0;\n display: flex;\n list-style: none;\n align-items: center;\n white-space: nowrap;\n line-height: 0;\n"])));
|
|
8725
|
+
const ExpandButton = styled__default.default(Button)(_b$8 || (_b$8 = __template$d(["\n appearance: none;\n margin: -4px;\n"])));
|
|
8684
8726
|
const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
|
|
8685
8727
|
const {
|
|
8686
8728
|
children,
|
|
@@ -8751,10 +8793,16 @@ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
|
|
|
8751
8793
|
});
|
|
8752
8794
|
});
|
|
8753
8795
|
const BORDER_OFFSET_X = 12;
|
|
8754
|
-
|
|
8796
|
+
var __freeze$c = Object.freeze;
|
|
8797
|
+
var __defProp$c = Object.defineProperty;
|
|
8798
|
+
var __template$c = (cooked, raw) => __freeze$c(__defProp$c(cooked, "raw", {
|
|
8799
|
+
value: __freeze$c(raw || cooked.slice())
|
|
8800
|
+
}));
|
|
8801
|
+
var _a$c, _b$7;
|
|
8802
|
+
function dialogStyle(_ref30) {
|
|
8755
8803
|
let {
|
|
8756
8804
|
theme
|
|
8757
|
-
} =
|
|
8805
|
+
} = _ref30;
|
|
8758
8806
|
const color = theme.sanity.color.base;
|
|
8759
8807
|
return {
|
|
8760
8808
|
"&:not([hidden])": {
|
|
@@ -8783,6 +8831,10 @@ function responsiveDialogPositionStyle(props) {
|
|
|
8783
8831
|
}
|
|
8784
8832
|
}));
|
|
8785
8833
|
}
|
|
8834
|
+
function animationDialogStyle(props) {
|
|
8835
|
+
if (!props.animate) return styled.css(_a$c || (_a$c = __template$c([""])));
|
|
8836
|
+
return styled.css(_b$7 || (_b$7 = __template$c(["\n @keyframes zoomIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n animation: fadeIn 200ms ease-out;\n // Animates the dialog card.\n & > [data-ui='DialogCard'] {\n animation: zoomIn 200ms ease-out;\n }\n "])));
|
|
8837
|
+
}
|
|
8786
8838
|
const key$3 = Symbol.for("@sanity/ui/context/dialog");
|
|
8787
8839
|
globalScope[key$3] = globalScope[key$3] || react.createContext({
|
|
8788
8840
|
version: 0
|
|
@@ -8801,7 +8853,7 @@ function isTargetWithinScope(boundaryElement, portalElement, target) {
|
|
|
8801
8853
|
if (!boundaryElement || !portalElement) return true;
|
|
8802
8854
|
return containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
|
|
8803
8855
|
}
|
|
8804
|
-
const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
|
|
8856
|
+
const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle);
|
|
8805
8857
|
const DialogContainer = styled__default.default(Container)(_a$b || (_a$b = __template$b(["\n &:not([hidden]) {\n display: flex;\n }\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"])));
|
|
8806
8858
|
const DialogCardRoot = styled__default.default(Card)(_b$6 || (_b$6 = __template$b(["\n &:not([hidden]) {\n display: flex;\n }\n width: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n overflow: clip;\n"])));
|
|
8807
8859
|
const DialogLayout = styled__default.default(Flex)(_c$2 || (_c$2 = __template$b(["\n flex: 1;\n min-height: 0;\n width: 100%;\n"])));
|
|
@@ -8970,6 +9022,7 @@ const Dialog = react.forwardRef(function Dialog2(props, ref) {
|
|
|
8970
9022
|
scheme,
|
|
8971
9023
|
width: widthProp = 0,
|
|
8972
9024
|
zOffset: zOffsetProp = dialog.zOffset || ((_a2 = theme.sanity.layer) == null ? void 0 : _a2.dialog.zOffset),
|
|
9025
|
+
animate = false,
|
|
8973
9026
|
...restProps
|
|
8974
9027
|
} = props;
|
|
8975
9028
|
const portal = usePortal();
|
|
@@ -9035,6 +9088,7 @@ const Dialog = react.forwardRef(function Dialog2(props, ref) {
|
|
|
9035
9088
|
ref,
|
|
9036
9089
|
role: "dialog",
|
|
9037
9090
|
zOffset,
|
|
9091
|
+
animate,
|
|
9038
9092
|
children: [/* @__PURE__ */jsxRuntime.jsx("div", {
|
|
9039
9093
|
ref: preDivRef,
|
|
9040
9094
|
tabIndex: 0
|
|
@@ -9841,15 +9895,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
|
|
|
9841
9895
|
var _a$6, _b$3, _c$1, _d;
|
|
9842
9896
|
const keyframe = styled.keyframes(_a$6 || (_a$6 = __template$6(["\n 0% {\n background-position: 100%;\n }\n 100% {\n background-position: -100%;\n }\n"])));
|
|
9843
9897
|
const animation = styled.css(_b$3 || (_b$3 = __template$6(["\n background-image: linear-gradient(\n to right,\n var(--card-skeleton-color-from),\n var(--card-skeleton-color-to),\n var(--card-skeleton-color-from),\n var(--card-skeleton-color-from),\n var(--card-skeleton-color-from)\n );\n background-position: 100%;\n background-size: 200% 100%;\n background-attachment: fixed;\n animation-name: ", ";\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-duration: 2000ms;\n"])), keyframe);
|
|
9844
|
-
const skeletonStyle = styled.css(_d || (_d = __template$6(["\n opacity: ", ";\n transition: opacity 200ms ease-in;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n ", "\n }\n\n @media screen and (prefers-reduced-motion: reduce) {\n background-color: var(--card-skeleton-color-from);\n }\n"])),
|
|
9898
|
+
const skeletonStyle = styled.css(_d || (_d = __template$6(["\n opacity: ", ";\n transition: opacity 200ms ease-in;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n ", "\n }\n\n @media screen and (prefers-reduced-motion: reduce) {\n background-color: var(--card-skeleton-color-from);\n }\n"])), _ref31 => {
|
|
9845
9899
|
let {
|
|
9846
9900
|
$visible
|
|
9847
|
-
} =
|
|
9901
|
+
} = _ref31;
|
|
9848
9902
|
return $visible ? 1 : 0;
|
|
9849
|
-
},
|
|
9903
|
+
}, _ref32 => {
|
|
9850
9904
|
let {
|
|
9851
9905
|
$animated
|
|
9852
|
-
} =
|
|
9906
|
+
} = _ref32;
|
|
9853
9907
|
return $animated ? animation : styled.css(_c$1 || (_c$1 = __template$6(["\n background-color: var(--card-skeleton-color-from);\n "])));
|
|
9854
9908
|
});
|
|
9855
9909
|
const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
|
|
@@ -9880,12 +9934,12 @@ const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
|
|
|
9880
9934
|
ref
|
|
9881
9935
|
});
|
|
9882
9936
|
});
|
|
9883
|
-
const Root$3 = styled__default.default(Skeleton)(
|
|
9937
|
+
const Root$3 = styled__default.default(Skeleton)(_ref33 => {
|
|
9884
9938
|
let {
|
|
9885
9939
|
$size,
|
|
9886
9940
|
$style,
|
|
9887
9941
|
theme
|
|
9888
|
-
} =
|
|
9942
|
+
} = _ref33;
|
|
9889
9943
|
const {
|
|
9890
9944
|
media
|
|
9891
9945
|
} = theme.sanity;
|
|
@@ -10235,12 +10289,12 @@ function ToastProvider(props) {
|
|
|
10235
10289
|
paddingY,
|
|
10236
10290
|
children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
|
|
10237
10291
|
initial: false,
|
|
10238
|
-
children: state.map(
|
|
10292
|
+
children: state.map(_ref34 => {
|
|
10239
10293
|
let {
|
|
10240
10294
|
dismiss,
|
|
10241
10295
|
id,
|
|
10242
10296
|
params
|
|
10243
|
-
} =
|
|
10297
|
+
} = _ref34;
|
|
10244
10298
|
return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
|
|
10245
10299
|
animate: {
|
|
10246
10300
|
opacity: 1,
|