@sanity/ui 2.0.0-alpha.6 → 2.0.0-alpha.7
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.esm.js +197 -205
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +197 -205
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/menu/menuGroup.tsx +19 -23
- package/src/components/menu/menuItem.tsx +25 -34
- package/src/primitives/_selectable/style.ts +7 -10
- package/src/primitives/badge/badge.tsx +4 -2
- package/src/primitives/badge/styles.ts +2 -2
- package/src/styles/colorVars/colorVarsStyle.ts +7 -5
- package/src/theme/lib/theme/color/cssVariables/cssVars.test.ts +24 -24
- package/src/theme/lib/theme/color/cssVariables/tints.ts +4 -4
- package/src/theme/studioTheme/theme.ts +1 -1
package/dist/index.js
CHANGED
|
@@ -1103,22 +1103,22 @@ const defaultTints = {
|
|
|
1103
1103
|
"base-shadow-outline-color": {
|
|
1104
1104
|
type: "colorWithOpacity",
|
|
1105
1105
|
tint: "500",
|
|
1106
|
-
opacity: 0.
|
|
1106
|
+
opacity: 0.2
|
|
1107
1107
|
},
|
|
1108
1108
|
"base-shadow-umbra-color": {
|
|
1109
1109
|
type: "colorWithOpacity",
|
|
1110
1110
|
tint: "500",
|
|
1111
|
-
opacity: 0.
|
|
1111
|
+
opacity: 0.1
|
|
1112
1112
|
},
|
|
1113
1113
|
"base-shadow-penumbra-color": {
|
|
1114
1114
|
type: "colorWithOpacity",
|
|
1115
1115
|
tint: "500",
|
|
1116
|
-
opacity: 0.
|
|
1116
|
+
opacity: 0.07
|
|
1117
1117
|
},
|
|
1118
1118
|
"base-shadow-ambient-color": {
|
|
1119
1119
|
type: "colorWithOpacity",
|
|
1120
1120
|
tint: "500",
|
|
1121
|
-
opacity: 0.
|
|
1121
|
+
opacity: 0.06
|
|
1122
1122
|
},
|
|
1123
1123
|
"skeleton-from": "100",
|
|
1124
1124
|
"skeleton-to": {
|
|
@@ -1663,9 +1663,9 @@ const studioTheme = {
|
|
|
1663
1663
|
penumbra: [0, 0, 0, 0],
|
|
1664
1664
|
ambient: [0, 0, 0, 0]
|
|
1665
1665
|
}, {
|
|
1666
|
-
umbra: [0, 3, 5, -
|
|
1666
|
+
umbra: [0, 3, 5, -2],
|
|
1667
1667
|
penumbra: [0, 6, 10, 0],
|
|
1668
|
-
ambient: [0, 1, 18,
|
|
1668
|
+
ambient: [0, 1, 18, 1]
|
|
1669
1669
|
}, {
|
|
1670
1670
|
umbra: [0, 7, 8, -4],
|
|
1671
1671
|
penumbra: [0, 12, 17, 2],
|
|
@@ -3192,73 +3192,14 @@ const Box = react.forwardRef(function Box2(props, ref) {
|
|
|
3192
3192
|
children: props.children
|
|
3193
3193
|
});
|
|
3194
3194
|
});
|
|
3195
|
-
var __freeze$y = Object.freeze;
|
|
3196
|
-
var __defProp$z = Object.defineProperty;
|
|
3197
|
-
var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
|
|
3198
|
-
value: __freeze$y(raw || cooked.slice())
|
|
3199
|
-
}));
|
|
3200
|
-
var _a$y, _b$k, _c$b;
|
|
3201
|
-
function labelBaseStyle(props) {
|
|
3202
|
-
const {
|
|
3203
|
-
$accent,
|
|
3204
|
-
$muted,
|
|
3205
|
-
theme
|
|
3206
|
-
} = props;
|
|
3207
|
-
const {
|
|
3208
|
-
fonts
|
|
3209
|
-
} = theme.sanity;
|
|
3210
|
-
return styled.css(_c$b || (_c$b = __template$y(["\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$y || (_a$y = __template$y(["\n color: ", "};\n "])), cssVars.default["text-accent"]), $muted && styled.css(_b$k || (_b$k = __template$y(["\n color: ", ";\n "])), cssVars.mutable["muted-fg-color"]), fonts.code.family);
|
|
3211
|
-
}
|
|
3212
|
-
var __freeze$x = Object.freeze;
|
|
3213
|
-
var __defProp$y = Object.defineProperty;
|
|
3214
|
-
var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
|
|
3215
|
-
value: __freeze$x(raw || cooked.slice())
|
|
3216
|
-
}));
|
|
3217
|
-
var _a$x;
|
|
3218
|
-
const Root$z = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
|
|
3219
|
-
const SpanWithTextOverflow$1 = styled__default.default.span(_a$x || (_a$x = __template$x(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n overflow: clip;\n"])));
|
|
3220
|
-
const Label = react.forwardRef(function Label2(props, ref) {
|
|
3221
|
-
const {
|
|
3222
|
-
accent,
|
|
3223
|
-
align,
|
|
3224
|
-
children: childrenProp,
|
|
3225
|
-
muted = false,
|
|
3226
|
-
size = 2,
|
|
3227
|
-
textOverflow,
|
|
3228
|
-
weight,
|
|
3229
|
-
...restProps
|
|
3230
|
-
} = props;
|
|
3231
|
-
let children = childrenProp;
|
|
3232
|
-
if (textOverflow === "ellipsis") {
|
|
3233
|
-
children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
|
|
3234
|
-
children
|
|
3235
|
-
});
|
|
3236
|
-
} else {
|
|
3237
|
-
children = /* @__PURE__ */jsxRuntime.jsx("span", {
|
|
3238
|
-
children
|
|
3239
|
-
});
|
|
3240
|
-
}
|
|
3241
|
-
return /* @__PURE__ */jsxRuntime.jsx(Root$z, {
|
|
3242
|
-
"data-ui": "Label",
|
|
3243
|
-
...restProps,
|
|
3244
|
-
$accent: accent,
|
|
3245
|
-
$align: useArrayProp(align),
|
|
3246
|
-
$muted: muted,
|
|
3247
|
-
$size: useArrayProp(size),
|
|
3248
|
-
$weight: weight,
|
|
3249
|
-
ref,
|
|
3250
|
-
children
|
|
3251
|
-
});
|
|
3252
|
-
});
|
|
3253
3195
|
function badgeStyle(props) {
|
|
3254
3196
|
const {
|
|
3255
3197
|
$mode,
|
|
3256
3198
|
$tone
|
|
3257
3199
|
} = props;
|
|
3258
3200
|
return {
|
|
3259
|
-
// backgroundColor: color.enabled.bg,
|
|
3260
3201
|
backgroundColor: $mode === "outline" ? cssVars[$tone]["bg-base"] : cssVars[$tone]["bg-tint"],
|
|
3261
|
-
color: cssVars[$tone]["text-secondary"],
|
|
3202
|
+
[mutableCardVariables["fg-color"]]: cssVars[$tone]["text-secondary"],
|
|
3262
3203
|
boxShadow: $mode === "outline" ? "inset 0 0 0 1px ".concat(cssVars[$tone]["border-base"]) : void 0,
|
|
3263
3204
|
cursor: "default",
|
|
3264
3205
|
"&:not([hidden])": {
|
|
@@ -3266,7 +3207,7 @@ function badgeStyle(props) {
|
|
|
3266
3207
|
}
|
|
3267
3208
|
};
|
|
3268
3209
|
}
|
|
3269
|
-
const Root$
|
|
3210
|
+
const Root$z = styled__default.default(Box)(responsiveRadiusStyle, badgeStyle);
|
|
3270
3211
|
const Badge = react.forwardRef(function Badge2(props, ref) {
|
|
3271
3212
|
const {
|
|
3272
3213
|
children,
|
|
@@ -3277,7 +3218,7 @@ const Badge = react.forwardRef(function Badge2(props, ref) {
|
|
|
3277
3218
|
tone = "default",
|
|
3278
3219
|
...restProps
|
|
3279
3220
|
} = props;
|
|
3280
|
-
return /* @__PURE__ */jsxRuntime.jsx(Root$
|
|
3221
|
+
return /* @__PURE__ */jsxRuntime.jsx(Root$z, {
|
|
3281
3222
|
"data-ui": "Badge",
|
|
3282
3223
|
...restProps,
|
|
3283
3224
|
$mode: mode,
|
|
@@ -3285,13 +3226,14 @@ const Badge = react.forwardRef(function Badge2(props, ref) {
|
|
|
3285
3226
|
$radius: useArrayProp(radius),
|
|
3286
3227
|
padding: useArrayProp(padding),
|
|
3287
3228
|
ref,
|
|
3288
|
-
children: /* @__PURE__ */jsxRuntime.jsx(
|
|
3229
|
+
children: /* @__PURE__ */jsxRuntime.jsx(Text, {
|
|
3289
3230
|
size: fontSize,
|
|
3231
|
+
weight: "medium",
|
|
3290
3232
|
children
|
|
3291
3233
|
})
|
|
3292
3234
|
});
|
|
3293
3235
|
});
|
|
3294
|
-
const Root$
|
|
3236
|
+
const Root$y = styled__default.default(Box)(flexItemStyle, responsiveFlexStyle);
|
|
3295
3237
|
const Flex = react.forwardRef(function Flex2(props, ref) {
|
|
3296
3238
|
const {
|
|
3297
3239
|
align,
|
|
@@ -3305,7 +3247,7 @@ const Flex = react.forwardRef(function Flex2(props, ref) {
|
|
|
3305
3247
|
return (
|
|
3306
3248
|
// @ts-expect-error -- some dollar prefixed typings aren't inferred correctly https://github.com/styled-components/styled-components/issues/4062
|
|
3307
3249
|
/* @__PURE__ */
|
|
3308
|
-
jsxRuntime.jsx(Root$
|
|
3250
|
+
jsxRuntime.jsx(Root$y, {
|
|
3309
3251
|
"data-ui": "Flex",
|
|
3310
3252
|
...restProps,
|
|
3311
3253
|
$align: useArrayProp(align),
|
|
@@ -3318,30 +3260,30 @@ const Flex = react.forwardRef(function Flex2(props, ref) {
|
|
|
3318
3260
|
})
|
|
3319
3261
|
);
|
|
3320
3262
|
});
|
|
3321
|
-
var __freeze$
|
|
3322
|
-
var __defProp$
|
|
3323
|
-
var __template$
|
|
3324
|
-
value: __freeze$
|
|
3263
|
+
var __freeze$y = Object.freeze;
|
|
3264
|
+
var __defProp$z = Object.defineProperty;
|
|
3265
|
+
var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
|
|
3266
|
+
value: __freeze$y(raw || cooked.slice())
|
|
3325
3267
|
}));
|
|
3326
|
-
var _a$
|
|
3327
|
-
const rotate$1 = styled.keyframes(_a$
|
|
3328
|
-
const Root$
|
|
3268
|
+
var _a$y, _b$k;
|
|
3269
|
+
const rotate$1 = styled.keyframes(_a$y || (_a$y = __template$y(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
3270
|
+
const Root$x = styled__default.default(Text)(_b$k || (_b$k = __template$y(["\n & > span > svg {\n animation: ", " 500ms linear infinite;\n }\n"])), rotate$1);
|
|
3329
3271
|
const Spinner = react.forwardRef(function Spinner2(props, ref) {
|
|
3330
|
-
return /* @__PURE__ */jsxRuntime.jsx(Root$
|
|
3272
|
+
return /* @__PURE__ */jsxRuntime.jsx(Root$x, {
|
|
3331
3273
|
"data-ui": "Spinner",
|
|
3332
3274
|
...props,
|
|
3333
3275
|
ref,
|
|
3334
3276
|
children: /* @__PURE__ */jsxRuntime.jsx(icons.SpinnerIcon, {})
|
|
3335
3277
|
});
|
|
3336
3278
|
});
|
|
3337
|
-
var __freeze$
|
|
3338
|
-
var __defProp$
|
|
3339
|
-
var __template$
|
|
3340
|
-
value: __freeze$
|
|
3279
|
+
var __freeze$x = Object.freeze;
|
|
3280
|
+
var __defProp$y = Object.defineProperty;
|
|
3281
|
+
var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
|
|
3282
|
+
value: __freeze$x(raw || cooked.slice())
|
|
3341
3283
|
}));
|
|
3342
|
-
var _a$
|
|
3284
|
+
var _a$x;
|
|
3343
3285
|
function buttonBaseStyles() {
|
|
3344
|
-
return styled.css(_a$
|
|
3286
|
+
return styled.css(_a$x || (_a$x = __template$x(["\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 & > 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 "])));
|
|
3345
3287
|
}
|
|
3346
3288
|
const buttonTheme = {
|
|
3347
3289
|
border: {
|
|
@@ -3437,14 +3379,14 @@ function buttonColorStyles(props) {
|
|
|
3437
3379
|
}
|
|
3438
3380
|
}, (_b = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b.root].filter(Boolean);
|
|
3439
3381
|
}
|
|
3440
|
-
var __freeze$
|
|
3441
|
-
var __defProp$
|
|
3442
|
-
var __template$
|
|
3443
|
-
value: __freeze$
|
|
3382
|
+
var __freeze$w = Object.freeze;
|
|
3383
|
+
var __defProp$x = Object.defineProperty;
|
|
3384
|
+
var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", {
|
|
3385
|
+
value: __freeze$w(raw || cooked.slice())
|
|
3444
3386
|
}));
|
|
3445
|
-
var _a$
|
|
3446
|
-
const Root$
|
|
3447
|
-
const LoadingBox = styled__default.default.div(_a$
|
|
3387
|
+
var _a$w;
|
|
3388
|
+
const Root$w = styled__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
|
|
3389
|
+
const LoadingBox = styled__default.default.div(_a$w || (_a$w = __template$w(["\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: ", ";\n border-radius: inherit;\n z-index: 1;\n box-shadow: inherit;\n"])), cssVars.mutable["bg-color"]);
|
|
3448
3390
|
const Button = react.forwardRef(function Button2(props, ref) {
|
|
3449
3391
|
const {
|
|
3450
3392
|
children,
|
|
@@ -3493,7 +3435,7 @@ const Button = react.forwardRef(function Button2(props, ref) {
|
|
|
3493
3435
|
paddingLeft,
|
|
3494
3436
|
paddingRight
|
|
3495
3437
|
}), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
|
|
3496
|
-
return /* @__PURE__ */jsxRuntime.jsxs(Root$
|
|
3438
|
+
return /* @__PURE__ */jsxRuntime.jsxs(Root$w, {
|
|
3497
3439
|
"data-ui": "Button",
|
|
3498
3440
|
...restProps,
|
|
3499
3441
|
$mode: mode,
|
|
@@ -3545,8 +3487,8 @@ function _colorVarStyleDisabled() {
|
|
|
3545
3487
|
[getToneCssVar("default", "text-accent")]: cssVars.default["text-secondary"],
|
|
3546
3488
|
[getToneCssVar("default", "text-code")]: cssVars.default["text-secondary"],
|
|
3547
3489
|
[getToneCssVar("default", "text-primary")]: cssVars.default["text-secondary"],
|
|
3548
|
-
[mutableCardVariables["fg-color"]]: cssVars.primary["text-
|
|
3549
|
-
[mutableCardVariables["muted-fg-color"]]: cssVars.primary["text-
|
|
3490
|
+
[mutableCardVariables["fg-color"]]: cssVars.primary["text-secondary"],
|
|
3491
|
+
[mutableCardVariables["muted-fg-color"]]: cssVars.primary["text-secondary"],
|
|
3550
3492
|
[mutableCardVariables["icon-color"]]: cssVars.primary["border-base"],
|
|
3551
3493
|
[mutableCardVariables["accent-color"]]: cssVars.primary["base-bg-card"],
|
|
3552
3494
|
[mutableCardVariables["bg-color"]]: cssVars.primary["bg-tint"],
|
|
@@ -3564,7 +3506,8 @@ function _colorVarStyleSelected() {
|
|
|
3564
3506
|
}
|
|
3565
3507
|
function _colorVarStyleHover() {
|
|
3566
3508
|
return {
|
|
3567
|
-
[mutableCardVariables["bg-color"]]: cssVars.default["bg-base-hover"]
|
|
3509
|
+
[mutableCardVariables["bg-color"]]: cssVars.default["bg-base-hover"],
|
|
3510
|
+
[getToneCssVar("default", "bg-tint")]: cssVars.default["bg-base-active"]
|
|
3568
3511
|
};
|
|
3569
3512
|
}
|
|
3570
3513
|
function _colorVarStyleActive() {
|
|
@@ -3572,10 +3515,10 @@ function _colorVarStyleActive() {
|
|
|
3572
3515
|
[mutableCardVariables["bg-color"]]: cssVars.default["bg-base-active"]
|
|
3573
3516
|
};
|
|
3574
3517
|
}
|
|
3575
|
-
function _selectableVarStyle() {
|
|
3518
|
+
function _selectableVarStyle(tone) {
|
|
3576
3519
|
return {
|
|
3577
3520
|
[mutableCardVariables["bg-color"]]: "inherit",
|
|
3578
|
-
[mutableCardVariables["fg-color"]]: cssVars.default["text-secondary"]
|
|
3521
|
+
[mutableCardVariables["fg-color"]]: tone === "default" ? cssVars.default["text-primary"] : cssVars.default["text-secondary"]
|
|
3579
3522
|
};
|
|
3580
3523
|
}
|
|
3581
3524
|
function _selectableVarStyleDisabled() {
|
|
@@ -3584,12 +3527,12 @@ function _selectableVarStyleDisabled() {
|
|
|
3584
3527
|
[mutableCardVariables["bg-color"]]: void 0
|
|
3585
3528
|
};
|
|
3586
3529
|
}
|
|
3587
|
-
var __freeze$
|
|
3588
|
-
var __defProp$
|
|
3589
|
-
var __template$
|
|
3590
|
-
value: __freeze$
|
|
3530
|
+
var __freeze$v = Object.freeze;
|
|
3531
|
+
var __defProp$w = Object.defineProperty;
|
|
3532
|
+
var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
|
|
3533
|
+
value: __freeze$v(raw || cooked.slice())
|
|
3591
3534
|
}));
|
|
3592
|
-
var _a$
|
|
3535
|
+
var _a$v, _b$j, _c$b;
|
|
3593
3536
|
function cardStyle(props) {
|
|
3594
3537
|
return [cardBaseStyle(props), cardColorStyle(props)];
|
|
3595
3538
|
}
|
|
@@ -3599,7 +3542,7 @@ function cardBaseStyle(props) {
|
|
|
3599
3542
|
theme
|
|
3600
3543
|
} = props;
|
|
3601
3544
|
const space = theme.sanity.space;
|
|
3602
|
-
return styled.css(_b$
|
|
3545
|
+
return styled.css(_b$j || (_b$j = __template$v(["\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: 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$v || (_a$v = __template$v(["\n background-size: ", "px ", "px;\n background-position: 50% 50%;\n background-image: ", ";\n "])), space[3], space[3], cssVars.mutable["bg-image"]));
|
|
3603
3546
|
}
|
|
3604
3547
|
function cardColorStyle(props) {
|
|
3605
3548
|
var _a2, _b2;
|
|
@@ -3618,7 +3561,7 @@ function cardColorStyle(props) {
|
|
|
3618
3561
|
width: 0,
|
|
3619
3562
|
color: cssVars.positive["border-accent"]
|
|
3620
3563
|
};
|
|
3621
|
-
return styled.css(_c$
|
|
3564
|
+
return styled.css(_c$b || (_c$b = __template$v(["\n /* A new css vars context is created, allowing for override of the default tone and changing the scheme */\n ", "\n color-scheme: ", ";\n ", "\n\n background-color: ", ";\n 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 "])), $updateCssVars && createCssVars($scheme, theme.sanity.color.tones, $tone), $scheme === "dark" ? "dark" : "light", $checkered && "--card-bg-image: repeating-conic-gradient(".concat(cssVars.default["base-bg-card"], " 0% 25%, ").concat(cssVars.default["bg-tint"], " 0% 50%)"), cssVars.mutable["bg-color"], cssVars.default["text-primary"], _colorVarStyleDisabled($checkered), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), $focusRing ? focusRingStyle({
|
|
3622
3565
|
border,
|
|
3623
3566
|
focusRing
|
|
3624
3567
|
}) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, _colorVarStyleDisabled($checkered), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), $focusRing ? focusRingStyle({
|
|
@@ -3626,7 +3569,7 @@ function cardColorStyle(props) {
|
|
|
3626
3569
|
focusRing
|
|
3627
3570
|
}) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
|
|
3628
3571
|
}
|
|
3629
|
-
const Root$
|
|
3572
|
+
const Root$v = styled__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
|
|
3630
3573
|
const Wrapper = _ref5 => {
|
|
3631
3574
|
let {
|
|
3632
3575
|
shouldAddContext,
|
|
@@ -3671,7 +3614,7 @@ const Card = react.forwardRef(function Card2(props, ref) {
|
|
|
3671
3614
|
shouldAddContext,
|
|
3672
3615
|
scheme,
|
|
3673
3616
|
tone,
|
|
3674
|
-
children: /* @__PURE__ */jsxRuntime.jsx(Root$
|
|
3617
|
+
children: /* @__PURE__ */jsxRuntime.jsx(Root$v, {
|
|
3675
3618
|
"data-as": typeof as === "string" ? as : void 0,
|
|
3676
3619
|
"data-scheme": scheme,
|
|
3677
3620
|
"data-ui": "Card",
|
|
@@ -3698,14 +3641,14 @@ const Card = react.forwardRef(function Card2(props, ref) {
|
|
|
3698
3641
|
})
|
|
3699
3642
|
});
|
|
3700
3643
|
});
|
|
3701
|
-
var __freeze$
|
|
3702
|
-
var __defProp$
|
|
3703
|
-
var __template$
|
|
3704
|
-
value: __freeze$
|
|
3644
|
+
var __freeze$u = Object.freeze;
|
|
3645
|
+
var __defProp$v = Object.defineProperty;
|
|
3646
|
+
var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
|
|
3647
|
+
value: __freeze$u(raw || cooked.slice())
|
|
3705
3648
|
}));
|
|
3706
|
-
var _a$
|
|
3649
|
+
var _a$u, _b$i;
|
|
3707
3650
|
function checkboxBaseStyles() {
|
|
3708
|
-
return styled.css(_a$
|
|
3651
|
+
return styled.css(_a$u || (_a$u = __template$u(["\n position: relative;\n display: inline-block;\n "])));
|
|
3709
3652
|
}
|
|
3710
3653
|
function inputElementStyles(props) {
|
|
3711
3654
|
const {
|
|
@@ -3718,7 +3661,7 @@ function inputElementStyles(props) {
|
|
|
3718
3661
|
const {
|
|
3719
3662
|
focusRing
|
|
3720
3663
|
} = input.checkbox;
|
|
3721
|
-
return styled.css(_b$
|
|
3664
|
+
return styled.css(_b$i || (_b$i = __template$u(["\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({
|
|
3722
3665
|
color: cssVars.default["border-base"],
|
|
3723
3666
|
width: input.border.width
|
|
3724
3667
|
}), rem(radius[2]), cssVars.default["bg-base"], cssVars.default["text-secondary"], focusRingBorderStyle({
|
|
@@ -3751,7 +3694,7 @@ function inputElementStyles(props) {
|
|
|
3751
3694
|
color: cssVars.default["border-base"]
|
|
3752
3695
|
}), cssVars.default["text-secondary"], cssVars.default["border-base"]);
|
|
3753
3696
|
}
|
|
3754
|
-
const Root$
|
|
3697
|
+
const Root$u = styled__default.default.div(checkboxBaseStyles);
|
|
3755
3698
|
const Input$5 = styled__default.default.input(inputElementStyles);
|
|
3756
3699
|
const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
|
|
3757
3700
|
const {
|
|
@@ -3771,7 +3714,7 @@ const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
|
|
|
3771
3714
|
ref.current.indeterminate = indeterminate || false;
|
|
3772
3715
|
}
|
|
3773
3716
|
}, [indeterminate, ref]);
|
|
3774
|
-
return /* @__PURE__ */jsxRuntime.jsxs(Root$
|
|
3717
|
+
return /* @__PURE__ */jsxRuntime.jsxs(Root$u, {
|
|
3775
3718
|
className,
|
|
3776
3719
|
"data-ui": "Checkbox",
|
|
3777
3720
|
style,
|
|
@@ -3789,12 +3732,12 @@ const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
|
|
|
3789
3732
|
})]
|
|
3790
3733
|
});
|
|
3791
3734
|
});
|
|
3792
|
-
var __freeze$
|
|
3793
|
-
var __defProp$
|
|
3794
|
-
var __template$
|
|
3795
|
-
value: __freeze$
|
|
3735
|
+
var __freeze$t = Object.freeze;
|
|
3736
|
+
var __defProp$u = Object.defineProperty;
|
|
3737
|
+
var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
|
|
3738
|
+
value: __freeze$t(raw || cooked.slice())
|
|
3796
3739
|
}));
|
|
3797
|
-
var _a$
|
|
3740
|
+
var _a$t;
|
|
3798
3741
|
function codeSyntaxHighlightingStyle(scheme) {
|
|
3799
3742
|
const dark = scheme === "dark";
|
|
3800
3743
|
const mainShade = dark ? 400 : 600;
|
|
@@ -3911,9 +3854,9 @@ function codeSyntaxHighlightingStyle(scheme) {
|
|
|
3911
3854
|
};
|
|
3912
3855
|
}
|
|
3913
3856
|
function codeBaseStyle(props) {
|
|
3914
|
-
return styled.css(_a$
|
|
3857
|
+
return styled.css(_a$t || (_a$t = __template$t(["\n 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 "])), cssVars.default["text-code"], codeSyntaxHighlightingStyle(props.$scheme));
|
|
3915
3858
|
}
|
|
3916
|
-
const Root$
|
|
3859
|
+
const Root$t = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
|
|
3917
3860
|
const Code = react.forwardRef(function Code2(props, ref) {
|
|
3918
3861
|
const {
|
|
3919
3862
|
children,
|
|
@@ -3927,7 +3870,7 @@ const Code = react.forwardRef(function Code2(props, ref) {
|
|
|
3927
3870
|
const {
|
|
3928
3871
|
scheme
|
|
3929
3872
|
} = useToneContext();
|
|
3930
|
-
return /* @__PURE__ */jsxRuntime.jsxs(Root$
|
|
3873
|
+
return /* @__PURE__ */jsxRuntime.jsxs(Root$t, {
|
|
3931
3874
|
"data-ui": "Code",
|
|
3932
3875
|
...restProps,
|
|
3933
3876
|
$size: useArrayProp(size),
|
|
@@ -3962,14 +3905,14 @@ function responsiveContainerWidthStyle(props) {
|
|
|
3962
3905
|
maxWidth: val === "auto" ? "none" : rem(container[val])
|
|
3963
3906
|
}));
|
|
3964
3907
|
}
|
|
3965
|
-
const Root$
|
|
3908
|
+
const Root$s = styled__default.default(Box)(containerBaseStyle, responsiveContainerWidthStyle);
|
|
3966
3909
|
const Container = react.forwardRef(function Container2(props, ref) {
|
|
3967
3910
|
const {
|
|
3968
3911
|
as,
|
|
3969
3912
|
width = 2,
|
|
3970
3913
|
...restProps
|
|
3971
3914
|
} = props;
|
|
3972
|
-
return /* @__PURE__ */jsxRuntime.jsx(Root$
|
|
3915
|
+
return /* @__PURE__ */jsxRuntime.jsx(Root$s, {
|
|
3973
3916
|
"data-ui": "Container",
|
|
3974
3917
|
...restProps,
|
|
3975
3918
|
$width: useArrayProp(width),
|
|
@@ -3977,7 +3920,7 @@ const Container = react.forwardRef(function Container2(props, ref) {
|
|
|
3977
3920
|
ref
|
|
3978
3921
|
});
|
|
3979
3922
|
});
|
|
3980
|
-
const Root$
|
|
3923
|
+
const Root$r = styled__default.default(Box)(responsiveGridStyle);
|
|
3981
3924
|
const Grid = react.forwardRef(function Grid2(props, ref) {
|
|
3982
3925
|
const {
|
|
3983
3926
|
as,
|
|
@@ -3992,7 +3935,7 @@ const Grid = react.forwardRef(function Grid2(props, ref) {
|
|
|
3992
3935
|
children,
|
|
3993
3936
|
...restProps
|
|
3994
3937
|
} = props;
|
|
3995
|
-
return /* @__PURE__ */jsxRuntime.jsx(Root$
|
|
3938
|
+
return /* @__PURE__ */jsxRuntime.jsx(Root$r, {
|
|
3996
3939
|
"data-as": typeof as === "string" ? as : void 0,
|
|
3997
3940
|
"data-ui": "Grid",
|
|
3998
3941
|
...restProps,
|
|
@@ -4009,28 +3952,28 @@ const Grid = react.forwardRef(function Grid2(props, ref) {
|
|
|
4009
3952
|
children
|
|
4010
3953
|
});
|
|
4011
3954
|
});
|
|
4012
|
-
var __freeze$
|
|
4013
|
-
var __defProp$
|
|
4014
|
-
var __template$
|
|
4015
|
-
value: __freeze$
|
|
3955
|
+
var __freeze$s = Object.freeze;
|
|
3956
|
+
var __defProp$t = Object.defineProperty;
|
|
3957
|
+
var __template$s = (cooked, raw) => __freeze$s(__defProp$t(cooked, "raw", {
|
|
3958
|
+
value: __freeze$s(raw || cooked.slice())
|
|
4016
3959
|
}));
|
|
4017
|
-
var _a$
|
|
3960
|
+
var _a$s, _b$h, _c$a;
|
|
4018
3961
|
function headingBaseStyle(props) {
|
|
4019
3962
|
const {
|
|
4020
3963
|
$accent,
|
|
4021
3964
|
$muted,
|
|
4022
3965
|
theme
|
|
4023
3966
|
} = props;
|
|
4024
|
-
return styled.css(_c$
|
|
3967
|
+
return styled.css(_c$a || (_c$a = __template$s(["\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: ", ";\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 ", ",\n 0 0 0 3px ", ";\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$s || (_a$s = __template$s(["\n color: ", "};\n "])), cssVars.default["text-accent"]), $muted && styled.css(_b$h || (_b$h = __template$s(["\n color: ", ";\n "])), cssVars.mutable["muted-fg-color"]), theme.sanity.fonts.code.family, cssVars.default["text-link"], cssVars.mutable["bg-color"], cssVars.positive["border-accent"]);
|
|
4025
3968
|
}
|
|
4026
|
-
var __freeze$
|
|
4027
|
-
var __defProp$
|
|
4028
|
-
var __template$
|
|
4029
|
-
value: __freeze$
|
|
3969
|
+
var __freeze$r = Object.freeze;
|
|
3970
|
+
var __defProp$s = Object.defineProperty;
|
|
3971
|
+
var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
|
|
3972
|
+
value: __freeze$r(raw || cooked.slice())
|
|
4030
3973
|
}));
|
|
4031
|
-
var _a$
|
|
4032
|
-
const Root$
|
|
4033
|
-
const SpanWithTextOverflow = styled__default.default.span(_a$
|
|
3974
|
+
var _a$r;
|
|
3975
|
+
const Root$q = styled__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
|
|
3976
|
+
const SpanWithTextOverflow$1 = styled__default.default.span(_a$r || (_a$r = __template$r(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n overflow: clip;\n"])));
|
|
4034
3977
|
const Heading = react.forwardRef(function Heading2(props, ref) {
|
|
4035
3978
|
const {
|
|
4036
3979
|
accent = false,
|
|
@@ -4044,11 +3987,11 @@ const Heading = react.forwardRef(function Heading2(props, ref) {
|
|
|
4044
3987
|
} = props;
|
|
4045
3988
|
let children = childrenProp;
|
|
4046
3989
|
if (textOverflow === "ellipsis") {
|
|
4047
|
-
children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow, {
|
|
3990
|
+
children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
|
|
4048
3991
|
children
|
|
4049
3992
|
});
|
|
4050
3993
|
}
|
|
4051
|
-
return /* @__PURE__ */jsxRuntime.jsx(Root$
|
|
3994
|
+
return /* @__PURE__ */jsxRuntime.jsx(Root$q, {
|
|
4052
3995
|
"data-ui": "Heading",
|
|
4053
3996
|
...restProps,
|
|
4054
3997
|
$accent: accent,
|
|
@@ -4088,7 +4031,7 @@ function inlineSpaceStyle(props) {
|
|
|
4088
4031
|
};
|
|
4089
4032
|
});
|
|
4090
4033
|
}
|
|
4091
|
-
const Root$
|
|
4034
|
+
const Root$p = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle);
|
|
4092
4035
|
const Inline = react.forwardRef(function Inline2(props, ref) {
|
|
4093
4036
|
const {
|
|
4094
4037
|
as,
|
|
@@ -4099,7 +4042,7 @@ const Inline = react.forwardRef(function Inline2(props, ref) {
|
|
|
4099
4042
|
const children = react.useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsxRuntime.jsx("div", {
|
|
4100
4043
|
children: child
|
|
4101
4044
|
}, idx)), [childrenProp]);
|
|
4102
|
-
return /* @__PURE__ */jsxRuntime.jsx(Root$
|
|
4045
|
+
return /* @__PURE__ */jsxRuntime.jsx(Root$p, {
|
|
4103
4046
|
"data-ui": "Inline",
|
|
4104
4047
|
...restProps,
|
|
4105
4048
|
$space: useArrayProp(space),
|
|
@@ -4108,16 +4051,16 @@ const Inline = react.forwardRef(function Inline2(props, ref) {
|
|
|
4108
4051
|
children
|
|
4109
4052
|
});
|
|
4110
4053
|
});
|
|
4111
|
-
var __freeze$
|
|
4112
|
-
var __defProp$
|
|
4113
|
-
var __template$
|
|
4114
|
-
value: __freeze$
|
|
4054
|
+
var __freeze$q = Object.freeze;
|
|
4055
|
+
var __defProp$r = Object.defineProperty;
|
|
4056
|
+
var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", {
|
|
4057
|
+
value: __freeze$q(raw || cooked.slice())
|
|
4115
4058
|
}));
|
|
4116
|
-
var _a$
|
|
4059
|
+
var _a$q;
|
|
4117
4060
|
function kbdStyle() {
|
|
4118
|
-
return styled.css(_a$
|
|
4061
|
+
return styled.css(_a$q || (_a$q = __template$q(["\n background: ", ";\n font: inherit;\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])), cssVars.default["bg-tint"]);
|
|
4119
4062
|
}
|
|
4120
|
-
const Root$
|
|
4063
|
+
const Root$o = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
|
|
4121
4064
|
const KBD = react.forwardRef(function KBD2(props, ref) {
|
|
4122
4065
|
const {
|
|
4123
4066
|
children,
|
|
@@ -4126,7 +4069,7 @@ const KBD = react.forwardRef(function KBD2(props, ref) {
|
|
|
4126
4069
|
radius = 2,
|
|
4127
4070
|
...restProps
|
|
4128
4071
|
} = props;
|
|
4129
|
-
return /* @__PURE__ */jsxRuntime.jsx(Root$
|
|
4072
|
+
return /* @__PURE__ */jsxRuntime.jsx(Root$o, {
|
|
4130
4073
|
"data-ui": "KBD",
|
|
4131
4074
|
...restProps,
|
|
4132
4075
|
$radius: useArrayProp(radius),
|
|
@@ -4144,6 +4087,64 @@ const KBD = react.forwardRef(function KBD2(props, ref) {
|
|
|
4144
4087
|
})
|
|
4145
4088
|
});
|
|
4146
4089
|
});
|
|
4090
|
+
var __freeze$p = Object.freeze;
|
|
4091
|
+
var __defProp$q = Object.defineProperty;
|
|
4092
|
+
var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", {
|
|
4093
|
+
value: __freeze$p(raw || cooked.slice())
|
|
4094
|
+
}));
|
|
4095
|
+
var _a$p, _b$g, _c$9;
|
|
4096
|
+
function labelBaseStyle(props) {
|
|
4097
|
+
const {
|
|
4098
|
+
$accent,
|
|
4099
|
+
$muted,
|
|
4100
|
+
theme
|
|
4101
|
+
} = props;
|
|
4102
|
+
const {
|
|
4103
|
+
fonts
|
|
4104
|
+
} = theme.sanity;
|
|
4105
|
+
return styled.css(_c$9 || (_c$9 = __template$p(["\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$p || (_a$p = __template$p(["\n color: ", "};\n "])), cssVars.default["text-accent"]), $muted && styled.css(_b$g || (_b$g = __template$p(["\n color: ", ";\n "])), cssVars.mutable["muted-fg-color"]), fonts.code.family);
|
|
4106
|
+
}
|
|
4107
|
+
var __freeze$o = Object.freeze;
|
|
4108
|
+
var __defProp$p = Object.defineProperty;
|
|
4109
|
+
var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
|
|
4110
|
+
value: __freeze$o(raw || cooked.slice())
|
|
4111
|
+
}));
|
|
4112
|
+
var _a$o;
|
|
4113
|
+
const Root$n = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
|
|
4114
|
+
const SpanWithTextOverflow = styled__default.default.span(_a$o || (_a$o = __template$o(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n overflow: clip;\n"])));
|
|
4115
|
+
const Label = react.forwardRef(function Label2(props, ref) {
|
|
4116
|
+
const {
|
|
4117
|
+
accent,
|
|
4118
|
+
align,
|
|
4119
|
+
children: childrenProp,
|
|
4120
|
+
muted = false,
|
|
4121
|
+
size = 2,
|
|
4122
|
+
textOverflow,
|
|
4123
|
+
weight,
|
|
4124
|
+
...restProps
|
|
4125
|
+
} = props;
|
|
4126
|
+
let children = childrenProp;
|
|
4127
|
+
if (textOverflow === "ellipsis") {
|
|
4128
|
+
children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow, {
|
|
4129
|
+
children
|
|
4130
|
+
});
|
|
4131
|
+
} else {
|
|
4132
|
+
children = /* @__PURE__ */jsxRuntime.jsx("span", {
|
|
4133
|
+
children
|
|
4134
|
+
});
|
|
4135
|
+
}
|
|
4136
|
+
return /* @__PURE__ */jsxRuntime.jsx(Root$n, {
|
|
4137
|
+
"data-ui": "Label",
|
|
4138
|
+
...restProps,
|
|
4139
|
+
$accent: accent,
|
|
4140
|
+
$align: useArrayProp(align),
|
|
4141
|
+
$muted: muted,
|
|
4142
|
+
$size: useArrayProp(size),
|
|
4143
|
+
$weight: weight,
|
|
4144
|
+
ref,
|
|
4145
|
+
children
|
|
4146
|
+
});
|
|
4147
|
+
});
|
|
4147
4148
|
const key$7 = Symbol.for("@sanity/ui/context/boundaryElement");
|
|
4148
4149
|
globalScope[key$7] = globalScope[key$7] || react.createContext(null);
|
|
4149
4150
|
const BoundaryElementContext = globalScope[key$7];
|
|
@@ -7435,7 +7436,7 @@ function selectableColorStyle(props) {
|
|
|
7435
7436
|
$tone,
|
|
7436
7437
|
$scheme
|
|
7437
7438
|
} = props;
|
|
7438
|
-
return styled.css(_b$4 || (_b$4 = __template$7(["\n ", "\n ", "\n\n background-color: ", ";\n color: ", ";\n outline: none;\n\n /* &:is(button) - Looks like a button in default mode */\n &[data-as='button'] {\n &:disabled {\n ", "\n }\n\n &:not(:disabled) {\n &[aria-pressed='true'] {\n ", "\n }\n\n &[data-selected],\n &[aria-selected='true'] > & {\n ", "\n }\n\n @media (hover: hover) {\n &:not([data-selected]) {\n &[data-hovered],\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n }\n }\n }\n }\n\n /* &:is(a) */\n &[data-as='a'] {\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-selected]) {\n &[data-hovered],\n &:hover {\n ", "\n }\n
|
|
7439
|
+
return styled.css(_b$4 || (_b$4 = __template$7(["\n ", "\n ", "\n\n background-color: ", ";\n color: ", ";\n outline: none;\n\n /* &:is(button) - Looks like a button in default mode */\n &[data-as='button'] {\n &:disabled {\n ", "\n }\n\n &:not(:disabled) {\n &[aria-pressed='true'] {\n ", "\n }\n\n &[data-selected],\n &[aria-selected='true'] > & {\n ", "\n }\n\n @media (hover: hover) {\n &:not([data-selected]) {\n &[data-hovered],\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n }\n }\n }\n }\n\n /* &:is(a) */\n &[data-as='a'] {\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-selected]) {\n &[data-hovered],\n &:hover {\n ", "\n }\n &:active {\n ", "\n }\n }\n }\n }\n }\n\n ", "\n "])), $tone !== "default" && createCssVars($scheme, theme.sanity.color.tones, $tone), _selectableVarStyle($tone), cssVars.mutable["bg-color"], cssVars[$tone]["text-secondary"], _selectableVarStyleDisabled(), _colorVarStyleHover(), _colorVarStyleHover(), _colorVarStyleHover(), _colorVarStyleHover(), _selectableVarStyleDisabled(), _colorVarStyleHover(), _colorVarStyleHover(), _colorVarStyleHover(), _colorVarStyleHover(), (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
|
|
7439
7440
|
}
|
|
7440
7441
|
const Selectable = styled__default.default(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
|
|
7441
7442
|
function useMenu() {
|
|
@@ -7452,7 +7453,7 @@ function MenuGroup(props) {
|
|
|
7452
7453
|
const {
|
|
7453
7454
|
as = "button",
|
|
7454
7455
|
children,
|
|
7455
|
-
fontSize,
|
|
7456
|
+
fontSize = 1,
|
|
7456
7457
|
icon,
|
|
7457
7458
|
onClick,
|
|
7458
7459
|
padding = 3,
|
|
@@ -7562,28 +7563,24 @@ function MenuGroup(props) {
|
|
|
7562
7563
|
ref: setRootElement,
|
|
7563
7564
|
tabIndex: -1,
|
|
7564
7565
|
type: as === "button" ? "button" : void 0,
|
|
7565
|
-
children: /* @__PURE__ */jsxRuntime.
|
|
7566
|
+
children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
|
|
7567
|
+
gap: space,
|
|
7566
7568
|
padding,
|
|
7567
|
-
children: /* @__PURE__ */jsxRuntime.jsxs(
|
|
7568
|
-
|
|
7569
|
+
children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
|
|
7570
|
+
size: fontSize,
|
|
7571
|
+
children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
|
|
7572
|
+
}), /* @__PURE__ */jsxRuntime.jsx(Box, {
|
|
7573
|
+
flex: 1,
|
|
7574
|
+
children: /* @__PURE__ */jsxRuntime.jsx(Text, {
|
|
7569
7575
|
size: fontSize,
|
|
7570
|
-
|
|
7571
|
-
|
|
7572
|
-
|
|
7573
|
-
|
|
7574
|
-
|
|
7575
|
-
|
|
7576
|
-
|
|
7577
|
-
|
|
7578
|
-
})
|
|
7579
|
-
}), /* @__PURE__ */jsxRuntime.jsx(Box, {
|
|
7580
|
-
marginLeft: space,
|
|
7581
|
-
children: /* @__PURE__ */jsxRuntime.jsx(Text, {
|
|
7582
|
-
size: fontSize,
|
|
7583
|
-
children: /* @__PURE__ */jsxRuntime.jsx(icons.ChevronRightIcon, {})
|
|
7584
|
-
})
|
|
7585
|
-
})]
|
|
7586
|
-
})
|
|
7576
|
+
textOverflow: "ellipsis",
|
|
7577
|
+
weight: "medium",
|
|
7578
|
+
children: text
|
|
7579
|
+
})
|
|
7580
|
+
}), /* @__PURE__ */jsxRuntime.jsx(Text, {
|
|
7581
|
+
size: fontSize,
|
|
7582
|
+
children: /* @__PURE__ */jsxRuntime.jsx(icons.ChevronRightIcon, {})
|
|
7583
|
+
})]
|
|
7587
7584
|
})
|
|
7588
7585
|
})
|
|
7589
7586
|
});
|
|
@@ -7656,7 +7653,7 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
|
|
|
7656
7653
|
forwardedAs: as,
|
|
7657
7654
|
$radius: useArrayProp(radius),
|
|
7658
7655
|
$padding: useArrayProp(0),
|
|
7659
|
-
$tone: tone,
|
|
7656
|
+
$tone: disabled ? "default" : tone,
|
|
7660
7657
|
$scheme: scheme,
|
|
7661
7658
|
disabled,
|
|
7662
7659
|
onClick: handleClick,
|
|
@@ -7666,38 +7663,33 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
|
|
|
7666
7663
|
role: "menuitem",
|
|
7667
7664
|
tabIndex: -1,
|
|
7668
7665
|
type: as === "button" ? "button" : void 0,
|
|
7669
|
-
children: [(icon || text || iconRight) && /* @__PURE__ */jsxRuntime.
|
|
7666
|
+
children: [(icon || text || iconRight) && /* @__PURE__ */jsxRuntime.jsxs(Flex, {
|
|
7670
7667
|
as: "span",
|
|
7668
|
+
gap: space,
|
|
7669
|
+
align: "center",
|
|
7671
7670
|
...paddingProps,
|
|
7672
|
-
children: /* @__PURE__ */jsxRuntime.jsxs(
|
|
7673
|
-
|
|
7674
|
-
children: [icon &&
|
|
7675
|
-
|
|
7676
|
-
|
|
7677
|
-
|
|
7678
|
-
flex: 1,
|
|
7679
|
-
marginLeft: icon ? space : void 0,
|
|
7680
|
-
marginRight: iconRight ? space : void 0,
|
|
7681
|
-
children: /* @__PURE__ */jsxRuntime.jsx(Text, {
|
|
7682
|
-
size: fontSize,
|
|
7683
|
-
textOverflow: "ellipsis",
|
|
7684
|
-
children: text
|
|
7685
|
-
})
|
|
7686
|
-
}), hotkeys && /* @__PURE__ */jsxRuntime.jsx(Box, {
|
|
7687
|
-
marginLeft: space,
|
|
7688
|
-
style: {
|
|
7689
|
-
marginTop: -4,
|
|
7690
|
-
marginBottom: -4
|
|
7691
|
-
},
|
|
7692
|
-
children: /* @__PURE__ */jsxRuntime.jsx(Hotkeys, {
|
|
7693
|
-
fontSize,
|
|
7694
|
-
keys: hotkeys
|
|
7695
|
-
})
|
|
7696
|
-
}), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
|
|
7671
|
+
children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
|
|
7672
|
+
size: fontSize,
|
|
7673
|
+
children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
|
|
7674
|
+
}), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
|
|
7675
|
+
flex: 1,
|
|
7676
|
+
children: /* @__PURE__ */jsxRuntime.jsx(Text, {
|
|
7697
7677
|
size: fontSize,
|
|
7698
|
-
|
|
7699
|
-
|
|
7700
|
-
|
|
7678
|
+
textOverflow: "ellipsis",
|
|
7679
|
+
weight: "medium",
|
|
7680
|
+
children: text
|
|
7681
|
+
})
|
|
7682
|
+
}), hotkeys && /* @__PURE__ */jsxRuntime.jsx(Hotkeys, {
|
|
7683
|
+
fontSize,
|
|
7684
|
+
keys: hotkeys,
|
|
7685
|
+
style: {
|
|
7686
|
+
marginTop: -4,
|
|
7687
|
+
marginBottom: -4
|
|
7688
|
+
}
|
|
7689
|
+
}), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
|
|
7690
|
+
size: fontSize,
|
|
7691
|
+
children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
|
|
7692
|
+
})]
|
|
7701
7693
|
}), children && /* @__PURE__ */jsxRuntime.jsx(Box, {
|
|
7702
7694
|
as: "span",
|
|
7703
7695
|
...paddingProps,
|