@sanity/ui 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.esm.js +4 -1
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +102 -99
  4. package/dist/index.js.map +1 -1
  5. package/package.json +30 -27
  6. package/src/components/autocomplete/__workshop__/constrainedHeight.tsx +2 -2
  7. package/src/global.ts +6 -0
  8. package/src/primitives/textInput/textInput.tsx +1 -0
package/dist/index.js CHANGED
@@ -57,7 +57,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
57
57
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
58
58
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
59
59
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
60
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
60
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
61
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
62
+ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
61
63
  Object.defineProperty(exports, '__esModule', {
62
64
  value: true
63
65
  });
@@ -71,14 +73,14 @@ var Refractor = require('react-refractor');
71
73
  var reactDom$1 = require('@floating-ui/react-dom');
72
74
  var reactDom = require('react-dom');
73
75
  var framerMotion = require('framer-motion');
74
- function _interopDefaultLegacy(e) {
76
+ function _interopDefaultCompat(e) {
75
77
  return e && typeof e === 'object' && 'default' in e ? e : {
76
- 'default': e
78
+ default: e
77
79
  };
78
80
  }
79
- var ReactIs__default = /*#__PURE__*/_interopDefaultLegacy(ReactIs);
80
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
81
- var Refractor__default = /*#__PURE__*/_interopDefaultLegacy(Refractor);
81
+ var ReactIs__default = /*#__PURE__*/_interopDefaultCompat(ReactIs);
82
+ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
83
+ var Refractor__default = /*#__PURE__*/_interopDefaultCompat(Refractor);
82
84
  const EMPTY_ARRAY = [];
83
85
  const EMPTY_RECORD = {};
84
86
  const FLOATING_STATIC_SIDES = {
@@ -3928,8 +3930,8 @@ function textBaseStyle(props) {
3928
3930
  } = theme.sanity.fonts.text;
3929
3931
  return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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: 0 0 0 1px var(--card-bg-color), 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 & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), $accent && styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: var(--card-muted-fg-color);\n "]))), theme.sanity.fonts.code.family, weights.bold);
3930
3932
  }
3931
- const Root$E = styled__default["default"].div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
3932
- const SpanWithTextOverflow$2 = styled__default["default"].span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
3933
+ const Root$E = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
3934
+ const SpanWithTextOverflow$2 = styled__default.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
3933
3935
  const Text = react.forwardRef(function Text2(props, ref) {
3934
3936
  const {
3935
3937
  accent = false,
@@ -4105,11 +4107,11 @@ function avatarStrokeStyle() {
4105
4107
  }
4106
4108
  };
4107
4109
  }
4108
- const Root$D = styled__default["default"].div(responsiveAvatarSizeStyle, avatarStyle.root);
4109
- const Arrow = styled__default["default"].div(avatarStyle.arrow);
4110
- const BgStroke = styled__default["default"].ellipse(avatarStyle.bgStroke);
4111
- const Stroke = styled__default["default"].ellipse(avatarStyle.stroke);
4112
- const Initials = styled__default["default"].div(avatarStyle.initials);
4110
+ const Root$D = styled__default.default.div(responsiveAvatarSizeStyle, avatarStyle.root);
4111
+ const Arrow = styled__default.default.div(avatarStyle.arrow);
4112
+ const BgStroke = styled__default.default.ellipse(avatarStyle.bgStroke);
4113
+ const Stroke = styled__default.default.ellipse(avatarStyle.stroke);
4114
+ const Initials = styled__default.default.div(avatarStyle.initials);
4113
4115
  const Avatar = react.forwardRef(function Avatar2(props, ref) {
4114
4116
  const {
4115
4117
  as: asProp,
@@ -4124,7 +4126,7 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
4124
4126
  size: sizeProp = 0
4125
4127
  } = props,
4126
4128
  restProps = _objectWithoutProperties(props, _excluded3);
4127
- const as = ReactIs__default["default"].isValidElementType(asProp) ? asProp : "div";
4129
+ const as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div";
4128
4130
  const size = useArrayProp(sizeProp);
4129
4131
  const theme = useTheme();
4130
4132
  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray;
@@ -4245,7 +4247,7 @@ function _avatarCounterBaseStyle(props) {
4245
4247
  } = props;
4246
4248
  return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n padding: 0 ", ";\n\n &:not([hidden]) {\n display: flex;\n }\n "])), rem(theme.sanity.space[2]));
4247
4249
  }
4248
- const Root$C = styled__default["default"].div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
4250
+ const Root$C = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
4249
4251
  const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
4250
4252
  const {
4251
4253
  count,
@@ -4292,7 +4294,7 @@ function responsiveAvatarStackSizeStyle(props) {
4292
4294
  };
4293
4295
  });
4294
4296
  }
4295
- const Root$B = styled__default["default"].div(responsiveAvatarStackSizeStyle, avatarStackStyle);
4297
+ const Root$B = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
4296
4298
  const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
4297
4299
  const {
4298
4300
  children: childrenProp,
@@ -4328,7 +4330,7 @@ const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
4328
4330
  }, String(childIndex)))]
4329
4331
  }));
4330
4332
  });
4331
- const Root$A = styled__default["default"].div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
4333
+ const Root$A = styled__default.default.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
4332
4334
  const Box = react.forwardRef(function Box2(props, ref) {
4333
4335
  const {
4334
4336
  as: asProp = "div",
@@ -4404,8 +4406,8 @@ function labelBaseStyle(props) {
4404
4406
  } = theme.sanity;
4405
4407
  return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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 & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), $accent && styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n color: var(--card-muted-fg-color);\n "]))), fonts.code.family);
4406
4408
  }
4407
- const Root$z = styled__default["default"].div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
4408
- const SpanWithTextOverflow$1 = styled__default["default"].span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
4409
+ const Root$z = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
4410
+ const SpanWithTextOverflow$1 = styled__default.default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
4409
4411
  const Label = react.forwardRef(function Label2(props, ref) {
4410
4412
  const {
4411
4413
  accent,
@@ -4457,7 +4459,7 @@ function badgeStyle(props) {
4457
4459
  }
4458
4460
  };
4459
4461
  }
4460
- const Root$y = styled__default["default"](Box)(responsiveRadiusStyle, badgeStyle);
4462
+ const Root$y = styled__default.default(Box)(responsiveRadiusStyle, badgeStyle);
4461
4463
  const Badge = react.forwardRef(function Badge2(props, ref) {
4462
4464
  const {
4463
4465
  children,
@@ -4482,7 +4484,7 @@ const Badge = react.forwardRef(function Badge2(props, ref) {
4482
4484
  })
4483
4485
  }));
4484
4486
  });
4485
- const Root$x = styled__default["default"](Box)(flexItemStyle, responsiveFlexStyle);
4487
+ const Root$x = styled__default.default(Box)(flexItemStyle, responsiveFlexStyle);
4486
4488
  const Flex = react.forwardRef(function Flex2(props, ref) {
4487
4489
  const {
4488
4490
  align,
@@ -4506,7 +4508,7 @@ const Flex = react.forwardRef(function Flex2(props, ref) {
4506
4508
  }));
4507
4509
  });
4508
4510
  const rotate$1 = styled.keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
4509
- const Root$w = styled__default["default"](Text)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n & > span > svg {\n animation: ", " 500ms linear infinite;\n }\n"])), rotate$1);
4511
+ const Root$w = styled__default.default(Text)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n & > span > svg {\n animation: ", " 500ms linear infinite;\n }\n"])), rotate$1);
4510
4512
  const Spinner = react.forwardRef(function Spinner2(props, ref) {
4511
4513
  return /* @__PURE__ */jsxRuntime.jsx(Root$w, _objectSpread(_objectSpread({
4512
4514
  "data-ui": "Spinner"
@@ -4588,8 +4590,8 @@ function buttonColorStyles(props) {
4588
4590
  }
4589
4591
  }, (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.button) == null ? void 0 : _b.root].filter(Boolean);
4590
4592
  }
4591
- const Root$v = styled__default["default"].button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
4592
- const LoadingBox = styled__default["default"].div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\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"])));
4593
+ const Root$v = styled__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
4594
+ const LoadingBox = styled__default.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\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"])));
4593
4595
  const Button = react.forwardRef(function Button2(props, ref) {
4594
4596
  const {
4595
4597
  children,
@@ -4721,7 +4723,7 @@ function cardColorStyle(props) {
4721
4723
  focusRing
4722
4724
  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
4723
4725
  }
4724
- const Root$u = styled__default["default"](Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
4726
+ const Root$u = styled__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
4725
4727
  const Card = react.forwardRef(function Card2(props, ref) {
4726
4728
  const {
4727
4729
  __unstable_checkered: checkered = false,
@@ -4804,8 +4806,8 @@ function inputElementStyles(props) {
4804
4806
  color: color.default.disabled.border
4805
4807
  }), color.default.disabled.fg);
4806
4808
  }
4807
- const Root$t = styled__default["default"].div(checkboxBaseStyles);
4808
- const Input$5 = styled__default["default"].input(inputElementStyles);
4809
+ const Root$t = styled__default.default.div(checkboxBaseStyles);
4810
+ const Input$5 = styled__default.default.input(inputElementStyles);
4809
4811
  const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
4810
4812
  const {
4811
4813
  checked,
@@ -4960,7 +4962,7 @@ function codeSyntaxHighlightingStyle(_ref20) {
4960
4962
  function codeBaseStyle() {
4961
4963
  return styled.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\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 & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), codeSyntaxHighlightingStyle);
4962
4964
  }
4963
- const Root$s = styled__default["default"].pre(codeBaseStyle, responsiveCodeFontStyle);
4965
+ const Root$s = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
4964
4966
  const Code = react.forwardRef(function Code2(props, ref) {
4965
4967
  const {
4966
4968
  children,
@@ -4970,7 +4972,7 @@ const Code = react.forwardRef(function Code2(props, ref) {
4970
4972
  } = props,
4971
4973
  restProps = _objectWithoutProperties(props, _excluded12);
4972
4974
  const language = typeof languageProp === "string" ? languageProp : void 0;
4973
- const registered = language ? Refractor__default["default"].hasLanguage(language) : false;
4975
+ const registered = language ? Refractor__default.default.hasLanguage(language) : false;
4974
4976
  return /* @__PURE__ */jsxRuntime.jsxs(Root$s, _objectSpread(_objectSpread({
4975
4977
  "data-ui": "Code"
4976
4978
  }, restProps), {}, {
@@ -4979,7 +4981,7 @@ const Code = react.forwardRef(function Code2(props, ref) {
4979
4981
  ref,
4980
4982
  children: [!(language && registered) && /* @__PURE__ */jsxRuntime.jsx("code", {
4981
4983
  children
4982
- }), language && registered && /* @__PURE__ */jsxRuntime.jsx(Refractor__default["default"], {
4984
+ }), language && registered && /* @__PURE__ */jsxRuntime.jsx(Refractor__default.default, {
4983
4985
  inline: true,
4984
4986
  language,
4985
4987
  value: String(children)
@@ -5005,7 +5007,7 @@ function responsiveContainerWidthStyle(props) {
5005
5007
  maxWidth: val === "auto" ? "none" : rem(container[val])
5006
5008
  }));
5007
5009
  }
5008
- const Root$r = styled__default["default"](Box)(containerBaseStyle, responsiveContainerWidthStyle);
5010
+ const Root$r = styled__default.default(Box)(containerBaseStyle, responsiveContainerWidthStyle);
5009
5011
  const Container = react.forwardRef(function Container2(props, ref) {
5010
5012
  const {
5011
5013
  as,
@@ -5020,7 +5022,7 @@ const Container = react.forwardRef(function Container2(props, ref) {
5020
5022
  ref
5021
5023
  }));
5022
5024
  });
5023
- const Root$q = styled__default["default"](Box)(responsiveGridStyle);
5025
+ const Root$q = styled__default.default(Box)(responsiveGridStyle);
5024
5026
  const Grid = react.forwardRef(function Grid2(props, ref) {
5025
5027
  const {
5026
5028
  as,
@@ -5060,8 +5062,8 @@ function headingBaseStyle(props) {
5060
5062
  } = props;
5061
5063
  return styled.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\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: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n }\n\n &:focus:not(:focus-visible) {\n box-shadow: none;\n }\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), $accent && styled.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n color: var(--card-muted-fg-color);\n "]))), theme.sanity.fonts.code.family);
5062
5064
  }
5063
- const Root$p = styled__default["default"].div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
5064
- const SpanWithTextOverflow = styled__default["default"].span(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
5065
+ const Root$p = styled__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
5066
+ const SpanWithTextOverflow = styled__default.default.span(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
5065
5067
  const Heading = react.forwardRef(function Heading2(props, ref) {
5066
5068
  const {
5067
5069
  accent = false,
@@ -5119,7 +5121,7 @@ function inlineSpaceStyle(props) {
5119
5121
  };
5120
5122
  });
5121
5123
  }
5122
- const Root$o = styled__default["default"](Box)(inlineBaseStyle, inlineSpaceStyle);
5124
+ const Root$o = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle);
5123
5125
  const Inline = react.forwardRef(function Inline2(props, ref) {
5124
5126
  const {
5125
5127
  as,
@@ -5142,7 +5144,7 @@ const Inline = react.forwardRef(function Inline2(props, ref) {
5142
5144
  function kbdStyle() {
5143
5145
  return styled.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n background: var(--card-bg-color);\n font: inherit;\n box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
5144
5146
  }
5145
- const Root$n = styled__default["default"].kbd(responsiveRadiusStyle, kbdStyle);
5147
+ const Root$n = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
5146
5148
  const KBD = react.forwardRef(function KBD2(props, ref) {
5147
5149
  const {
5148
5150
  children,
@@ -5321,7 +5323,7 @@ function LayerProvider(props) {
5321
5323
  children
5322
5324
  });
5323
5325
  }
5324
- const Root$m = styled__default["default"].div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n position: relative;\n"])));
5326
+ const Root$m = styled__default.default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n position: relative;\n"])));
5325
5327
  const LayerChildren = react.forwardRef(function LayerChildren2(props, ref) {
5326
5328
  const {
5327
5329
  children,
@@ -5438,7 +5440,7 @@ function PortalProvider(props) {
5438
5440
  children
5439
5441
  });
5440
5442
  }
5441
- const Root$l = styled__default["default"].div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n overflow: hidden;\n"])));
5443
+ const Root$l = styled__default.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n overflow: hidden;\n"])));
5442
5444
  const SrOnly = react.forwardRef(function SrOnly2(props, ref) {
5443
5445
  const {
5444
5446
  as,
@@ -5539,8 +5541,8 @@ function _isScrollable(el) {
5539
5541
  const style = window.getComputedStyle(el);
5540
5542
  return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
5541
5543
  }
5542
- const Root$k = styled__default["default"].div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n position: relative;\n"])));
5543
- const ItemWrapper = styled__default["default"].div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n"])));
5544
+ const Root$k = styled__default.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n position: relative;\n"])));
5545
+ const ItemWrapper = styled__default.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n"])));
5544
5546
  const VirtualList = react.forwardRef(function VirtualList2(props, ref) {
5545
5547
  const {
5546
5548
  as = "div",
@@ -5729,9 +5731,9 @@ function size(options) {
5729
5731
  }
5730
5732
  };
5731
5733
  }
5732
- const Root$j = styled__default["default"].div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\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);
5733
- const BorderPath = styled__default["default"].path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n fill: var(--card-shadow-outline-color);\n"])));
5734
- const ShapePath = styled__default["default"].path(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n fill: var(--card-bg-color);\n"])));
5734
+ const Root$j = styled__default.default.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\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);
5735
+ const BorderPath = styled__default.default.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n fill: var(--card-shadow-outline-color);\n"])));
5736
+ const ShapePath = styled__default.default.path(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n fill: var(--card-bg-color);\n"])));
5735
5737
  const PopoverArrow = react.forwardRef(function PopoverArrow2(props, ref) {
5736
5738
  return /* @__PURE__ */jsxRuntime.jsx(Root$j, _objectSpread(_objectSpread({
5737
5739
  "data-ui": "Popover__arrow"
@@ -5765,8 +5767,8 @@ function popoverCardStyle(props) {
5765
5767
  maxWidth: typeof $boundaryWidth === "number" ? "".concat($boundaryWidth - DEFAULT_POPOVER_PADDING * 2, "px") : void 0
5766
5768
  };
5767
5769
  }
5768
- const Root$i = react.memo(styled__default["default"](Card)(popoverCardStyle));
5769
- const PopoverContainer = react.memo(styled__default["default"](Container)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n max-height: inherit;\n max-width: inherit;\n"]))));
5770
+ const Root$i = react.memo(styled__default.default(Card)(popoverCardStyle));
5771
+ const PopoverContainer = react.memo(styled__default.default(Container)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n max-height: inherit;\n max-width: inherit;\n"]))));
5770
5772
  const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref) {
5771
5773
  const {
5772
5774
  __unstable_margins: marginsProp,
@@ -6041,8 +6043,8 @@ function inputElementStyle(props) {
6041
6043
  width: input.border.width
6042
6044
  }), color.default.readOnly.border, color.default.readOnly.bg, color.default.readOnly.fg, color.default.disabled.border, color.default.disabled.bg, color.default.disabled.fg);
6043
6045
  }
6044
- const Root$h = styled__default["default"].div(radioBaseStyle);
6045
- const Input$4 = styled__default["default"].input(inputElementStyle);
6046
+ const Root$h = styled__default.default.div(radioBaseStyle);
6047
+ const Input$4 = styled__default.default.input(inputElementStyle);
6046
6048
  const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
6047
6049
  const {
6048
6050
  className,
@@ -6138,9 +6140,9 @@ const selectStyle = {
6138
6140
  input: inputStyle,
6139
6141
  iconBox: iconBoxStyle
6140
6142
  };
6141
- const Root$g = styled__default["default"].div(selectStyle.root);
6142
- const Input$3 = styled__default["default"].select(selectStyle.input);
6143
- const IconBox = styled__default["default"](Box)(selectStyle.iconBox);
6143
+ const Root$g = styled__default.default.div(selectStyle.root);
6144
+ const Input$3 = styled__default.default.select(selectStyle.input);
6145
+ const IconBox = styled__default.default(Box)(selectStyle.iconBox);
6144
6146
  const Select = react.forwardRef(function Select2(props, forwardedRef) {
6145
6147
  const {
6146
6148
  children,
@@ -6202,7 +6204,7 @@ function responsiveStackSpaceStyle(props) {
6202
6204
  gridGap: rem(space[spaceIndex])
6203
6205
  }));
6204
6206
  }
6205
- const Root$f = styled__default["default"](Box)(stackBaseStyle, responsiveStackSpaceStyle);
6207
+ const Root$f = styled__default.default(Box)(stackBaseStyle, responsiveStackSpaceStyle);
6206
6208
  const Stack = react.forwardRef(function Stack2(props, ref) {
6207
6209
  const {
6208
6210
  as,
@@ -6263,11 +6265,11 @@ function switchThumbStyles(props) {
6263
6265
  const checked = $indeterminate !== true && props.$checked === true;
6264
6266
  return styled.css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\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\n ", "\n\n ", "\n "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && styled.css(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n transform: translate3d(", "px, 0, 0);\n "])), checkedOffset), $indeterminate && styled.css(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n transform: translate3d(", "px, 0, 0);\n "])), indeterminateOffset));
6265
6267
  }
6266
- const Root$e = styled__default["default"].span(switchBaseStyles);
6267
- const Input$2 = styled__default["default"].input(switchInputStyles);
6268
- const Representation = styled__default["default"].span(switchRepresentationStyles);
6269
- const Track = styled__default["default"].span(switchTrackStyles);
6270
- const Thumb = styled__default["default"].span(switchThumbStyles);
6268
+ const Root$e = styled__default.default.span(switchBaseStyles);
6269
+ const Input$2 = styled__default.default.input(switchInputStyles);
6270
+ const Representation = styled__default.default.span(switchRepresentationStyles);
6271
+ const Track = styled__default.default.span(switchTrackStyles);
6272
+ const Thumb = styled__default.default.span(switchThumbStyles);
6271
6273
  const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
6272
6274
  const {
6273
6275
  checked,
@@ -6305,10 +6307,10 @@ const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
6305
6307
  })]
6306
6308
  });
6307
6309
  });
6308
- const Root$d = styled__default["default"].span(textInputRootStyle);
6309
- const InputRoot$1 = styled__default["default"].span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6310
- const Input$1 = styled__default["default"].textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6311
- const Presentation$1 = styled__default["default"].div(responsiveRadiusStyle, textInputRepresentationStyle);
6310
+ const Root$d = styled__default.default.span(textInputRootStyle);
6311
+ const InputRoot$1 = styled__default.default.span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6312
+ const Input$1 = styled__default.default.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6313
+ const Presentation$1 = styled__default.default.div(responsiveRadiusStyle, textInputRepresentationStyle);
6312
6314
  const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
6313
6315
  const {
6314
6316
  border = true,
@@ -6353,21 +6355,21 @@ const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
6353
6355
  const CLEAR_BUTTON_BOX_STYLE = {
6354
6356
  zIndex: 2
6355
6357
  };
6356
- const Root$c = styled__default["default"](Card).attrs({
6358
+ const Root$c = styled__default.default(Card).attrs({
6357
6359
  forwardedAs: "span"
6358
6360
  })(textInputRootStyle);
6359
- const InputRoot = styled__default["default"].span(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6360
- const Prefix = styled__default["default"](Card).attrs({
6361
+ const InputRoot = styled__default.default.span(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6362
+ const Prefix = styled__default.default(Card).attrs({
6361
6363
  forwardedAs: "span"
6362
6364
  })(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n & > span {\n display: block;\n margin: -1px;\n }\n"])));
6363
- const Suffix = styled__default["default"](Card).attrs({
6365
+ const Suffix = styled__default.default(Card).attrs({
6364
6366
  forwardedAs: "span"
6365
6367
  })(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n & > span {\n display: block;\n margin: -1px;\n }\n"])));
6366
- const Input = styled__default["default"].input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6367
- const Presentation = styled__default["default"].span(responsiveRadiusStyle, textInputRepresentationStyle);
6368
- const LeftBox = styled__default["default"](Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n"])));
6369
- const RightBox = styled__default["default"](Box)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n"])));
6370
- const RightCard = styled__default["default"](Card)(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n background-color: transparent;\n position: absolute;\n top: 0;\n right: 0;\n"])));
6368
+ const Input = styled__default.default.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6369
+ const Presentation = styled__default.default.span(responsiveRadiusStyle, textInputRepresentationStyle);
6370
+ const LeftBox = styled__default.default(Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n"])));
6371
+ const RightBox = styled__default.default(Box)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n"])));
6372
+ const RightCard = styled__default.default(Card)(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n background-color: transparent;\n position: absolute;\n top: 0;\n right: 0;\n"])));
6371
6373
  const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
6372
6374
  const {
6373
6375
  border = true,
@@ -6464,6 +6466,7 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
6464
6466
  style: CLEAR_BUTTON_BOX_STYLE,
6465
6467
  tone: customValidity ? "critical" : "inherit",
6466
6468
  children: /* @__PURE__ */jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
6469
+ "aria-label": "Clear",
6467
6470
  "data-qa": "clear-button",
6468
6471
  fontSize,
6469
6472
  icon: icons.CloseIcon,
@@ -6511,9 +6514,9 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
6511
6514
  }), suffixNode]
6512
6515
  });
6513
6516
  });
6514
- const Root$b = styled__default["default"].div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\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"])));
6515
- const Border = styled__default["default"].path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n fill: var(--card-shadow-outline-color);\n"])));
6516
- const Shape = styled__default["default"].path(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n fill: var(--card-bg-color);\n"])));
6517
+ const Root$b = styled__default.default.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\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"])));
6518
+ const Border = styled__default.default.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n fill: var(--card-shadow-outline-color);\n"])));
6519
+ const Shape = styled__default.default.path(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n fill: var(--card-bg-color);\n"])));
6517
6520
  const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
6518
6521
  const restProps = _extends({}, (_objectDestructuringEmpty(props), props));
6519
6522
  return /* @__PURE__ */jsxRuntime.jsx(Root$b, _objectSpread(_objectSpread({
@@ -6532,7 +6535,7 @@ const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
6532
6535
  })
6533
6536
  }));
6534
6537
  });
6535
- const Root$a = styled__default["default"](Layer)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n pointer-events: none;\n"])));
6538
+ const Root$a = styled__default.default(Layer)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n pointer-events: none;\n"])));
6536
6539
  const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
6537
6540
  var _a, _b, _c;
6538
6541
  const boundaryElementContext = useBoundaryElement();
@@ -6694,10 +6697,10 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
6694
6697
  })]
6695
6698
  });
6696
6699
  });
6697
- const Root$9 = styled__default["default"].div(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n line-height: 0;\n"])));
6698
- const ListBox = styled__default["default"](Box)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n & > ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n"])));
6700
+ const Root$9 = styled__default.default.div(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n line-height: 0;\n"])));
6701
+ const ListBox = styled__default.default(Box)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n & > ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n"])));
6699
6702
  const rotate = styled.keyframes(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
6700
- const AnimatedSpinnerIcon = styled__default["default"](icons.SpinnerIcon)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n animation: ", " 500ms linear infinite;\n"])), rotate);
6703
+ const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n animation: ", " 500ms linear infinite;\n"])), rotate);
6701
6704
  function AutocompleteOption(props) {
6702
6705
  const {
6703
6706
  children,
@@ -7210,8 +7213,8 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
7210
7213
  });
7211
7214
  });
7212
7215
  const Autocomplete = InnerAutocomplete;
7213
- const Root$8 = styled__default["default"].ol(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\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"])));
7214
- const ExpandButton = styled__default["default"](Button)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n appearance: none;\n margin: -4px;\n"])));
7216
+ const Root$8 = styled__default.default.ol(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\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"])));
7217
+ const ExpandButton = styled__default.default(Button)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n appearance: none;\n margin: -4px;\n"])));
7215
7218
  const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
7216
7219
  const {
7217
7220
  children,
@@ -7321,13 +7324,13 @@ const DialogContext = globalScope[key$3];
7321
7324
  function useDialog() {
7322
7325
  return react.useContext(DialogContext);
7323
7326
  }
7324
- const Root$7 = styled__default["default"](Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
7325
- const DialogContainer = styled__default["default"](Container)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\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"])));
7326
- const DialogCardRoot = styled__default["default"](Card)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: flex;\n }\n width: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n"])));
7327
- const DialogLayout = styled__default["default"](Flex)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n flex: 1;\n min-height: 0;\n width: 100%;\n"])));
7328
- const DialogHeader = styled__default["default"](Card)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n position: relative;\n z-index: 2;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n bottom: -1px;\n border-bottom: 1px solid var(--card-hairline-soft-color);\n }\n"])));
7329
- const DialogContent = styled__default["default"](Box)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n position: relative;\n z-index: 1;\n overflow: auto;\n outline: none;\n"])));
7330
- const DialogFooter = styled__default["default"](Box)(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n position: relative;\n z-index: 3;\n border-top: 1px solid var(--card-hairline-soft-color);\n"])));
7327
+ const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
7328
+ const DialogContainer = styled__default.default(Container)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\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"])));
7329
+ const DialogCardRoot = styled__default.default(Card)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: flex;\n }\n width: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n"])));
7330
+ const DialogLayout = styled__default.default(Flex)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n flex: 1;\n min-height: 0;\n width: 100%;\n"])));
7331
+ const DialogHeader = styled__default.default(Card)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n position: relative;\n z-index: 2;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n bottom: -1px;\n border-bottom: 1px solid var(--card-hairline-soft-color);\n }\n"])));
7332
+ const DialogContent = styled__default.default(Box)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n position: relative;\n z-index: 1;\n overflow: auto;\n outline: none;\n"])));
7333
+ const DialogFooter = styled__default.default(Box)(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n position: relative;\n z-index: 3;\n border-top: 1px solid var(--card-hairline-soft-color);\n"])));
7331
7334
  const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
7332
7335
  const {
7333
7336
  __unstable_autoFocus: autoFocus,
@@ -7529,8 +7532,8 @@ function DialogProvider(props) {
7529
7532
  children
7530
7533
  });
7531
7534
  }
7532
- const Root$6 = styled__default["default"].kbd(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: block;\n }\n font: inherit;\n"])));
7533
- const Key = styled__default["default"](KBD)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: block;\n }\n"])));
7535
+ const Root$6 = styled__default.default.kbd(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: block;\n }\n font: inherit;\n"])));
7536
+ const Key = styled__default.default(KBD)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n &:not([hidden]) {\n display: block;\n }\n"])));
7534
7537
  const Hotkeys = react.forwardRef(function Hotkeys2(props, ref) {
7535
7538
  const {
7536
7539
  fontSize,
@@ -7751,7 +7754,7 @@ function useMenuController(props) {
7751
7754
  setRootElement
7752
7755
  };
7753
7756
  }
7754
- const Root$5 = styled__default["default"](Box)(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n outline: none;\n overflow: auto;\n"])));
7757
+ const Root$5 = styled__default.default(Box)(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n outline: none;\n overflow: auto;\n"])));
7755
7758
  const Menu = react.forwardRef(function Menu2(props, ref) {
7756
7759
  const {
7757
7760
  children,
@@ -7974,7 +7977,7 @@ const MenuButton = react.forwardRef(function MenuButton2(props, ref) {
7974
7977
  children: button || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {})
7975
7978
  }));
7976
7979
  });
7977
- const MenuDivider = styled__default["default"].hr(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n height: 1px;\n border: 0;\n background: var(--card-hairline-soft-color);\n margin: 0;\n"])));
7980
+ const MenuDivider = styled__default.default.hr(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n height: 1px;\n border: 0;\n background: var(--card-hairline-soft-color);\n margin: 0;\n"])));
7978
7981
  function selectableBaseStyle() {
7979
7982
  return styled.css(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n background-color: inherit;\n color: inherit;\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 text-decoration: none;\n }\n "])));
7980
7983
  }
@@ -7992,7 +7995,7 @@ function selectableColorStyle(props) {
7992
7995
  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
7993
7996
  return styled.css(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n ", "\n\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n outline: none;\n\n /* &:is(button) */\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 &: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 &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n }\n }\n }\n }\n\n ", "\n "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
7994
7997
  }
7995
- const Selectable = styled__default["default"](Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
7998
+ const Selectable = styled__default.default(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
7996
7999
  function useMenu() {
7997
8000
  const value = react.useContext(MenuContext);
7998
8001
  if (!value) {
@@ -8264,7 +8267,7 @@ const skeletonStyle = styled.css(_templateObject81 || (_templateObject81 = _tagg
8264
8267
  } = _ref25;
8265
8268
  return $animated ? animation : styled.css(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n background-color: var(--card-skeleton-color-from);\n "])));
8266
8269
  });
8267
- const Root$4 = styled__default["default"](Box)(responsiveRadiusStyle, skeletonStyle);
8270
+ const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
8268
8271
  const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
8269
8272
  const {
8270
8273
  animated = false,
@@ -8291,7 +8294,7 @@ const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
8291
8294
  ref
8292
8295
  }));
8293
8296
  });
8294
- const Root$3 = styled__default["default"](Skeleton)(_ref26 => {
8297
+ const Root$3 = styled__default.default(Skeleton)(_ref26 => {
8295
8298
  let {
8296
8299
  $size,
8297
8300
  $style,
@@ -8474,8 +8477,8 @@ const ROLES = {
8474
8477
  success: "alert",
8475
8478
  info: "alert"
8476
8479
  };
8477
- const Root$2 = styled__default["default"](Card)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n pointer-events: all;\n"])));
8478
- const TextBox = styled__default["default"](Flex)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n overflow-x: auto;\n"])));
8480
+ const Root$2 = styled__default.default(Card)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n pointer-events: all;\n"])));
8481
+ const TextBox = styled__default.default(Flex)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n overflow-x: auto;\n"])));
8479
8482
  function Toast(props) {
8480
8483
  const {
8481
8484
  closable,
@@ -8530,8 +8533,8 @@ function Toast(props) {
8530
8533
  const key$1 = Symbol.for("@sanity/ui/context/toast");
8531
8534
  globalScope[key$1] = globalScope[key$1] || react.createContext(null);
8532
8535
  const ToastContext = globalScope[key$1];
8533
- const Root$1 = styled__default["default"](Layer)(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n"])));
8534
- const ToastContainer = styled__default["default"].div(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n position: absolute;\n right: 0;\n bottom: 0;\n max-width: 420px;\n width: 100%;\n"])));
8536
+ const Root$1 = styled__default.default(Layer)(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n"])));
8537
+ const ToastContainer = styled__default.default.div(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n position: absolute;\n right: 0;\n bottom: 0;\n max-width: 420px;\n width: 100%;\n"])));
8535
8538
  let toastId = 0;
8536
8539
  function ToastProvider(props) {
8537
8540
  const {
@@ -8936,11 +8939,11 @@ const TreeGroup = react.memo(function TreeGroup2(props) {
8936
8939
  children
8937
8940
  }));
8938
8941
  });
8939
- const Root = react.memo(styled__default["default"].li(treeItemRootStyle, treeItemRootColorStyle));
8940
- const TreeItemBox = styled__default["default"](Box).attrs({
8942
+ const Root = react.memo(styled__default.default.li(treeItemRootStyle, treeItemRootColorStyle));
8943
+ const TreeItemBox = styled__default.default(Box).attrs({
8941
8944
  forwardedAs: "a"
8942
8945
  })(treeItemBoxStyle);
8943
- const ToggleArrowText = styled__default["default"](Text)(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n & > svg {\n transition: transform 100ms;\n }\n"])));
8946
+ const ToggleArrowText = styled__default.default(Text)(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n & > svg {\n transition: transform 100ms;\n }\n"])));
8944
8947
  const TreeItem = react.memo(function TreeItem2(props) {
8945
8948
  const {
8946
8949
  children,