@sanity/ui 4.1.1 → 4.2.1

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 (44) hide show
  1. package/dist/{arrow-DKn5YKdy.js → arrow-D-raLuvE.js} +57 -49
  2. package/dist/arrow-D-raLuvE.js.map +1 -0
  3. package/dist/autocomplete.d.ts.map +1 -1
  4. package/dist/autocomplete.js +118 -122
  5. package/dist/autocomplete.js.map +1 -1
  6. package/dist/breadcrumbs.js +10 -5
  7. package/dist/breadcrumbs.js.map +1 -1
  8. package/dist/{button-Dh_M2fYx.js → button-D8Ge5vTw.js} +6 -5
  9. package/dist/button-D8Ge5vTw.js.map +1 -0
  10. package/dist/{flex-DmbDG2ks.js → flex-JVQRW_e_.js} +2 -2
  11. package/dist/{flex-DmbDG2ks.js.map → flex-JVQRW_e_.js.map} +1 -1
  12. package/dist/{grid-6JSgMj1O.js → grid-Dw7q0_YV.js} +2 -2
  13. package/dist/{grid-6JSgMj1O.js.map → grid-Dw7q0_YV.js.map} +1 -1
  14. package/dist/{hotkeys-uSArGPzR.js → hotkeys-DTjEz_u3.js} +9 -6
  15. package/dist/hotkeys-DTjEz_u3.js.map +1 -0
  16. package/dist/index.d.ts.map +1 -1
  17. package/dist/index.js +168 -250
  18. package/dist/index.js.map +1 -1
  19. package/dist/{layer-BfwisMR6.js → layer-dwv5h6E7.js} +3 -3
  20. package/dist/{layer-BfwisMR6.js.map → layer-dwv5h6E7.js.map} +1 -1
  21. package/dist/menu.js +5 -5
  22. package/dist/{popover-myCXZV_F.js → popover-BngOa-um.js} +14 -11
  23. package/dist/popover-BngOa-um.js.map +1 -0
  24. package/dist/popover-CMlQeKn0.d.ts.map +1 -1
  25. package/dist/popover.js +1 -1
  26. package/dist/{stack-rsNFPq2-.js → stack-Bue-701Y.js} +2 -2
  27. package/dist/{stack-rsNFPq2-.js.map → stack-Bue-701Y.js.map} +1 -1
  28. package/dist/styles.css +156 -36
  29. package/dist/{textInput-DAaORuky.js → textInput-C83gG7N5.js} +23 -19
  30. package/dist/textInput-C83gG7N5.js.map +1 -0
  31. package/dist/toast.js +38 -43
  32. package/dist/toast.js.map +1 -1
  33. package/dist/tooltip.js +53 -49
  34. package/dist/tooltip.js.map +1 -1
  35. package/dist/useClickOutsideEvent-wGLGWBZN.js.map +1 -1
  36. package/dist/{useLayer-D1usxIE0.js → useLayer-ONr7wTUN.js} +52 -31
  37. package/dist/useLayer-ONr7wTUN.js.map +1 -0
  38. package/package.json +11 -10
  39. package/dist/arrow-DKn5YKdy.js.map +0 -1
  40. package/dist/button-Dh_M2fYx.js.map +0 -1
  41. package/dist/hotkeys-uSArGPzR.js.map +0 -1
  42. package/dist/popover-myCXZV_F.js.map +0 -1
  43. package/dist/textInput-DAaORuky.js.map +0 -1
  44. package/dist/useLayer-D1usxIE0.js.map +0 -1
@@ -1,9 +1,9 @@
1
1
  import { a as rem, i as _responsive, n as _getArrayProp, s as EMPTY_RECORD } from "./helpers-C8xxXAQC.js";
2
2
  import { a as isHTMLElement, c as isHTMLTextAreaElement, i as isHTMLButtonElement, o as isHTMLInputElement, r as isHTMLAnchorElement, s as isHTMLSelectElement } from "./element-BYgCE_iK.js";
3
3
  import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
4
- import { l as useRootTheme, m as focusRingStyle, p as focusRingBorderStyle, s as Card, v as responsiveRadiusStyle, y as Box } from "./useLayer-D1usxIE0.js";
5
- import { n as Text } from "./stack-rsNFPq2-.js";
6
- import { t as Button } from "./button-Dh_M2fYx.js";
4
+ import { l as useRootTheme, m as focusRingStyle, p as focusRingBorderStyle, s as Card, v as responsiveRadiusStyle, y as Box } from "./useLayer-ONr7wTUN.js";
5
+ import { n as Text } from "./stack-Bue-701Y.js";
6
+ import { t as Button } from "./button-D8Ge5vTw.js";
7
7
  import { c } from "react/compiler-runtime";
8
8
  import { clsx } from "clsx/lite";
9
9
  import { isValidElement, useEffect, useImperativeHandle, useRef } from "react";
@@ -143,14 +143,23 @@ function textInputRepresentationStyle(props) {
143
143
  width: input.border.width
144
144
  })};}}}`;
145
145
  }
146
- var inputRoot = "_1lyk8y1", textInputRoot = "_1lyk8y0";
147
- const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Input = /* @__PURE__ */ styled.input.withConfig({
146
+ var inputRoot = "_1lyk8y2", textAreaRoot = "_1lyk8y1 _1lyk8y0", textInputRoot = "_1lyk8y0";
147
+ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Prefix = styled(Card).attrs({ forwardedAs: "span" }).withConfig({
148
+ displayName: "Prefix",
149
+ componentId: "sc-k29dck-0"
150
+ })`border-top-right-radius:0;border-bottom-right-radius:0;& > span{display:block;margin:-1px;}`, Suffix = styled(Card).attrs({ forwardedAs: "span" }).withConfig({
151
+ displayName: "Suffix",
152
+ componentId: "sc-k29dck-1"
153
+ })`border-top-left-radius:0;border-bottom-left-radius:0;& > span{display:block;margin:-1px;}`, Input = /* @__PURE__ */ styled.input.withConfig({
148
154
  displayName: "Input",
149
- componentId: "sc-fkdyjt-0"
155
+ componentId: "sc-k29dck-2"
150
156
  })(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled.span.withConfig({
151
157
  displayName: "Presentation",
152
- componentId: "sc-fkdyjt-1"
153
- })(responsiveRadiusStyle, textInputRepresentationStyle);
158
+ componentId: "sc-k29dck-3"
159
+ })(responsiveRadiusStyle, textInputRepresentationStyle), RightCard = styled(Card).withConfig({
160
+ displayName: "RightCard",
161
+ componentId: "sc-k29dck-4"
162
+ })`background-color:transparent;position:absolute;top:0;right:0;`;
154
163
  /**
155
164
  * Single line text input.
156
165
  *
@@ -174,12 +183,10 @@ function TextInput(props) {
174
183
  event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
175
184
  }, $[29] = onClear, $[30] = t12);
176
185
  let handleClearClick = t12, t13;
177
- $[31] !== prefix || $[32] !== radius ? (t13 = prefix && /* @__PURE__ */ jsx(Card, {
186
+ $[31] !== prefix || $[32] !== radius ? (t13 = prefix && /* @__PURE__ */ jsx(Prefix, {
178
187
  borderTop: !0,
179
188
  borderLeft: !0,
180
189
  borderBottom: !0,
181
- className: "_8fnjkq3",
182
- as: "span",
183
190
  radius,
184
191
  sizing: "border",
185
192
  tone: "inherit",
@@ -221,9 +228,8 @@ function TextInput(props) {
221
228
  let clearButtonBoxPadding = t18, t19;
222
229
  $[55] === padding ? t19 = $[56] : (t19 = padding.map(_temp3), $[55] = padding, $[56] = t19);
223
230
  let clearButtonPadding = t19, clearButtonProps = typeof clearButton == "object" ? clearButton : EMPTY_RECORD, t20;
224
- $[57] !== clearButton || $[58] !== clearButtonBoxPadding || $[59] !== clearButtonPadding || $[60] !== clearButtonProps || $[61] !== customValidity || $[62] !== disabled || $[63] !== fontSize || $[64] !== handleClearClick || $[65] !== radius || $[66] !== readOnly ? (t20 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(Card, {
225
- className: "_8fnjkq5",
226
- as: "span",
231
+ $[57] !== clearButton || $[58] !== clearButtonBoxPadding || $[59] !== clearButtonPadding || $[60] !== clearButtonProps || $[61] !== customValidity || $[62] !== disabled || $[63] !== fontSize || $[64] !== handleClearClick || $[65] !== radius || $[66] !== readOnly ? (t20 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(RightCard, {
232
+ forwardedAs: "span",
227
233
  padding: clearButtonBoxPadding,
228
234
  style: CLEAR_BUTTON_BOX_STYLE,
229
235
  tone: customValidity ? "critical" : "inherit",
@@ -242,12 +248,10 @@ function TextInput(props) {
242
248
  })
243
249
  }), $[57] = clearButton, $[58] = clearButtonBoxPadding, $[59] = clearButtonPadding, $[60] = clearButtonProps, $[61] = customValidity, $[62] = disabled, $[63] = fontSize, $[64] = handleClearClick, $[65] = radius, $[66] = readOnly, $[67] = t20) : t20 = $[67];
244
250
  let clearButtonNode = t20, t21;
245
- $[68] !== radius || $[69] !== suffix ? (t21 = suffix && /* @__PURE__ */ jsx(Card, {
251
+ $[68] !== radius || $[69] !== suffix ? (t21 = suffix && /* @__PURE__ */ jsx(Suffix, {
246
252
  borderTop: !0,
247
253
  borderRight: !0,
248
254
  borderBottom: !0,
249
- className: "_8fnjkq4",
250
- as: "span",
251
255
  radius,
252
256
  sizing: "border",
253
257
  tone: "inherit",
@@ -304,6 +308,6 @@ function _temp2(v) {
304
308
  function _temp(event) {
305
309
  event.preventDefault(), event.stopPropagation();
306
310
  }
307
- export { textInputFontSizeStyle as a, responsiveInputPaddingStyle as c, attemptFocus as d, focusFirstDescendant as f, _raf2 as g, _raf as h, textInputBaseStyle as i, useCustomValidity as l, isFocusable as m, inputRoot as n, textInputRepresentationStyle as o, focusLastDescendant as p, textInputRoot as r, responsiveInputPaddingIconRightStyle as s, TextInput as t, _hasFocus as u };
311
+ export { textInputFontSizeStyle as a, responsiveInputPaddingStyle as c, attemptFocus as d, focusFirstDescendant as f, _raf2 as g, _raf as h, textInputBaseStyle as i, useCustomValidity as l, isFocusable as m, inputRoot as n, textInputRepresentationStyle as o, focusLastDescendant as p, textAreaRoot as r, responsiveInputPaddingIconRightStyle as s, TextInput as t, _hasFocus as u };
308
312
 
309
- //# sourceMappingURL=textInput-DAaORuky.js.map
313
+ //# sourceMappingURL=textInput-C83gG7N5.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"textInput-C83gG7N5.js","names":["() => {\n ref.current?.setCustomValidity(customValidity || '')\n }","[customValidity, ref]","ref.current?.setCustomValidity","border = true","disabled = false","fontSizeProp = 2","gap = 3","paddingProp = 3","radiusProp = 2","type = 'text'","_getArrayProp(fontSizeProp)","_getArrayProp(paddingProp)","_getArrayProp(radiusProp)","_getArrayProp(gap)","() => ref.current","useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault()\n event.stopPropagation()\n }, [])","(event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault()\n event.stopPropagation()\n\n if (onClear) onClear()\n\n // Focus the input, in case focus has been lost when clicking the clear button\n ref.current?.focus()\n }","useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault()\n event.stopPropagation()\n\n if (onClear) onClear()\n\n // Focus the input, in case focus has been lost when clicking the clear button\n ref.current?.focus()\n },\n [onClear, ref],\n )","prefix && (\n <Prefix borderTop borderLeft borderBottom radius={radius} sizing=\"border\" tone=\"inherit\">\n <span>{prefix}</span>\n </Prefix>\n )","useMemo(\n () =>\n prefix && (\n <Prefix borderTop borderLeft borderBottom radius={radius} sizing=\"border\" tone=\"inherit\">\n <span>{prefix}</span>\n </Prefix>\n ),\n [prefix, radius],\n )","IconComponent && (\n <Box className={textInputLeftBox} padding={padding}>\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n </Box>\n )","!$hasClearButton && IconRightComponent && (\n <Box className={textInputRightBox} padding={padding}>\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n </Box>\n )","<Presentation\n $hasPrefix={$hasPrefix}\n $unstableDisableFocusRing={__unstable_disableFocusRing}\n $hasSuffix={$hasSuffix}\n $radius={radius}\n $scheme={rootTheme.scheme}\n $tone={rootTheme.tone}\n data-border={border ? '' : undefined}\n data-scheme={rootTheme.scheme}\n data-tone={rootTheme.tone}\n >\n {IconComponent && (\n <Box className={textInputLeftBox} padding={padding}>\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n </Box>\n )}\n\n {!$hasClearButton && IconRightComponent && (\n <Box className={textInputRightBox} padding={padding}>\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n </Box>\n )}\n </Presentation>","scheme","tone","border ? '' : undefined","useMemo(\n () => (\n <Presentation\n $hasPrefix={$hasPrefix}\n $unstableDisableFocusRing={__unstable_disableFocusRing}\n $hasSuffix={$hasSuffix}\n $radius={radius}\n $scheme={rootTheme.scheme}\n $tone={rootTheme.tone}\n data-border={border ? '' : undefined}\n data-scheme={rootTheme.scheme}\n data-tone={rootTheme.tone}\n >\n {IconComponent && (\n <Box className={textInputLeftBox} padding={padding}>\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n </Box>\n )}\n\n {!$hasClearButton && IconRightComponent && (\n <Box className={textInputRightBox} padding={padding}>\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n </Box>\n )}\n </Presentation>\n ),\n [\n __unstable_disableFocusRing,\n border,\n fontSize,\n IconComponent,\n IconRightComponent,\n padding,\n radius,\n rootTheme,\n $hasClearButton,\n $hasPrefix,\n $hasSuffix,\n ],\n )","padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n })","(v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n }","useMemo(\n () =>\n padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n }),\n [padding],\n )","padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 0\n if (v === 2) return 1\n\n return v - 1\n })","(v) => {\n if (v === 0) return 0\n if (v === 1) return 0\n if (v === 2) return 1\n\n return v - 1\n }","useMemo(\n () =>\n padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 0\n if (v === 2) return 1\n\n return v - 1\n }),\n [padding],\n )","!disabled &&\n !readOnly &&\n clearButton && (\n <RightCard\n forwardedAs=\"span\"\n padding={clearButtonBoxPadding}\n style={CLEAR_BUTTON_BOX_STYLE}\n tone={customValidity ? 'critical' : 'inherit'}\n >\n <Button\n aria-label=\"Clear\"\n data-qa=\"clear-button\"\n fontSize={fontSize}\n icon={CloseIcon}\n mode=\"bleed\"\n padding={clearButtonPadding}\n radius={radius}\n {...clearButtonProps}\n className={clsx(textInputClearButton, clearButtonProps.className)}\n onClick={handleClearClick}\n onMouseDown={handleClearMouseDown}\n />\n </RightCard>\n )","clearButtonProps.className","useMemo(\n () =>\n !disabled &&\n !readOnly &&\n clearButton && (\n <RightCard\n forwardedAs=\"span\"\n padding={clearButtonBoxPadding}\n style={CLEAR_BUTTON_BOX_STYLE}\n tone={customValidity ? 'critical' : 'inherit'}\n >\n <Button\n aria-label=\"Clear\"\n data-qa=\"clear-button\"\n fontSize={fontSize}\n icon={CloseIcon}\n mode=\"bleed\"\n padding={clearButtonPadding}\n radius={radius}\n {...clearButtonProps}\n className={clsx(textInputClearButton, clearButtonProps.className)}\n onClick={handleClearClick}\n onMouseDown={handleClearMouseDown}\n />\n </RightCard>\n ),\n [\n clearButton,\n clearButtonBoxPadding,\n clearButtonPadding,\n clearButtonProps,\n customValidity,\n disabled,\n fontSize,\n handleClearClick,\n handleClearMouseDown,\n radius,\n readOnly,\n ],\n )","suffix && (\n <Suffix borderTop borderRight borderBottom radius={radius} sizing=\"border\" tone=\"inherit\">\n <span>{suffix}</span>\n </Suffix>\n )","useMemo(\n () =>\n suffix && (\n <Suffix borderTop borderRight borderBottom radius={radius} sizing=\"border\" tone=\"inherit\">\n <span>{suffix}</span>\n </Suffix>\n ),\n [radius, suffix],\n )","<Input\n data-as=\"input\"\n data-scheme={rootTheme.scheme}\n data-tone={rootTheme.tone}\n {...restProps}\n $fontSize={fontSize}\n $iconLeft={$hasIcon}\n $iconRight={$hasIconRight || $hasClearButton}\n $padding={padding}\n $scheme={rootTheme.scheme}\n $space={space}\n $tone={rootTheme.tone}\n $weight={weight}\n disabled={disabled}\n readOnly={readOnly}\n ref={ref}\n type={type}\n />","$hasIconRight || $hasClearButton","<span className={inputRoot}>\n <Input\n data-as=\"input\"\n data-scheme={rootTheme.scheme}\n data-tone={rootTheme.tone}\n {...restProps}\n $fontSize={fontSize}\n $iconLeft={$hasIcon}\n $iconRight={$hasIconRight || $hasClearButton}\n $padding={padding}\n $scheme={rootTheme.scheme}\n $space={space}\n $tone={rootTheme.tone}\n $weight={weight}\n disabled={disabled}\n readOnly={readOnly}\n ref={ref}\n type={type}\n />\n\n {presentationNode}\n {clearButtonNode}\n </span>","<Card\n as=\"span\"\n className={textInputRoot}\n data-ui=\"TextInput\"\n display=\"flex\"\n tone={rootTheme.tone}\n >\n {prefixNode}\n\n <span className={inputRoot}>\n <Input\n data-as=\"input\"\n data-scheme={rootTheme.scheme}\n data-tone={rootTheme.tone}\n {...restProps}\n $fontSize={fontSize}\n $iconLeft={$hasIcon}\n $iconRight={$hasIconRight || $hasClearButton}\n $padding={padding}\n $scheme={rootTheme.scheme}\n $space={space}\n $tone={rootTheme.tone}\n $weight={weight}\n disabled={disabled}\n readOnly={readOnly}\n ref={ref}\n type={type}\n />\n\n {presentationNode}\n {clearButtonNode}\n </span>\n\n {suffixNode}\n </Card>","v"],"sources":["../src/core/helpers/animation.ts","../src/core/helpers/focus.ts","../src/core/hooks/useCustomValidity.ts","../src/core/styles/input/responsiveInputPaddingStyle.ts","../src/core/styles/input/textInputStyle.ts","../src/core/styles/input/textInput.css.ts","../src/core/primitives/textInput/textInput.css.ts","../src/core/primitives/textInput/textInput.tsx"],"sourcesContent":["/**\n * @internal\n */\nexport function _raf(fn: () => void): () => void {\n const frameId = requestAnimationFrame(fn)\n\n return () => {\n cancelAnimationFrame(frameId)\n }\n}\n\n/**\n * @internal\n */\nexport function _raf2(fn: () => void): () => void {\n let innerDispose: (() => void) | null = null\n\n const outerDispose = _raf(() => {\n innerDispose = _raf(fn)\n })\n\n return () => {\n if (innerDispose) innerDispose()\n\n outerDispose()\n }\n}\n","import {\n isHTMLAnchorElement,\n isHTMLButtonElement,\n isHTMLElement,\n isHTMLInputElement,\n isHTMLSelectElement,\n isHTMLTextAreaElement,\n} from './element'\n\n// export const globalFocusState = {\n// IgnoreUtilFocusChanges: false,\n// }\n\n/**\n * @internal\n */\nexport function _hasFocus(element: HTMLElement): boolean {\n return Boolean(document.activeElement) && element.contains(document.activeElement)\n}\n\n/**\n * @internal\n */\nexport function isFocusable(element: HTMLElement): boolean {\n if (\n element.tabIndex > 0 ||\n (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)\n ) {\n return true\n }\n\n if (isHTMLAnchorElement(element)) {\n return Boolean(element.href) && element.rel !== 'ignore'\n }\n\n if (isHTMLInputElement(element)) {\n return element.type !== 'hidden' && element.type !== 'file' && !element.disabled\n }\n\n if (\n isHTMLButtonElement(element) ||\n isHTMLSelectElement(element) ||\n isHTMLTextAreaElement(element)\n ) {\n return !element.disabled\n }\n\n return false\n}\n\n/**\n * @internal\n */\nexport function attemptFocus(element: HTMLElement): boolean {\n if (!isFocusable(element)) {\n return false\n }\n\n // globalFocusState.IgnoreUtilFocusChanges = true\n\n try {\n element.focus()\n } catch {\n // ignore\n }\n\n // globalFocusState.IgnoreUtilFocusChanges = false\n\n return document.activeElement === element\n}\n\n/**\n * @internal\n */\nexport function focusFirstDescendant(element: HTMLElement): boolean {\n for (let i = 0; i < element.childNodes.length; i++) {\n const child = element.childNodes[i]\n\n if (isHTMLElement(child) && (attemptFocus(child) || focusFirstDescendant(child))) {\n return true\n }\n }\n\n return false\n}\n\n/**\n * @internal\n */\nexport function focusLastDescendant(element: HTMLElement): boolean {\n for (let i = element.childNodes.length - 1; i >= 0; i--) {\n const child = element.childNodes[i]\n\n if (isHTMLElement(child) && (attemptFocus(child) || focusLastDescendant(child))) {\n return true\n }\n }\n\n return false\n}\n","import {useEffect} from 'react'\n\n/**\n * @beta\n */\nexport function useCustomValidity(\n ref: {current: null | {setCustomValidity: (validity: string) => void}},\n customValidity: string | undefined,\n): void {\n useEffect(() => {\n ref.current?.setCustomValidity(customValidity || '')\n }, [customValidity, ref])\n}\n","import {CSSObject} from '../../../theme/system/css'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_responsive, rem} from '../helpers'\nimport {ThemeProps} from '../types'\n\nexport interface TextInputResponsivePaddingStyleProps {\n $fontSize: number[]\n $iconLeft?: boolean\n $iconRight?: boolean\n $padding: number[]\n $space: number[]\n}\n\nexport function responsiveInputPaddingStyle(\n props: TextInputResponsivePaddingStyleProps & ThemeProps,\n): CSSObject[] {\n const {$fontSize, $iconLeft, $iconRight, $padding, $space} = props\n const {font, media, space} = getTheme_v2(props.theme)\n const len = Math.max($padding.length, $space.length, $fontSize.length)\n const _padding: number[] = []\n const _space: number[] = []\n const _fontSize: number[] = []\n\n for (let i = 0; i < len; i += 1) {\n _fontSize[i] = $fontSize[i] === undefined ? _fontSize[i - 1] : $fontSize[i]\n _padding[i] = $padding[i] === undefined ? _padding[i - 1] : $padding[i]\n _space[i] = $space[i] === undefined ? _space[i - 1] : $space[i]\n }\n\n return _responsive(media, _padding, (_, i) => {\n const size = font.text.sizes[_fontSize[i]] || font.text.sizes[2]\n const emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight\n const p = space[_padding[i]]\n const s = space[_space[i]]\n\n const styles = {\n paddingTop: rem(p - size.ascenderHeight),\n paddingRight: rem(p),\n paddingBottom: rem(p - size.descenderHeight),\n paddingLeft: rem(p),\n }\n\n if ($iconRight) styles.paddingRight = rem(p + emSize + s)\n if ($iconLeft) styles.paddingLeft = rem(p + emSize + s)\n\n return styles\n })\n}\n\nexport function responsiveInputPaddingIconRightStyle(\n props: {\n $fontSize: number[]\n $padding: number[]\n $space: number[]\n } & ThemeProps,\n): CSSObject[] {\n return responsiveInputPaddingStyle({...props, $iconRight: true})\n}\n","import {css} from 'styled-components'\n\nimport {ThemeColorSchemeKey} from '../../../theme/system/color/_system'\nimport {CSSObject} from '../../../theme/system/css'\nimport {ThemeFontWeightKey} from '../../../theme/system/font'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {CardTone} from '../../types/card'\nimport {focusRingBorderStyle, focusRingStyle} from '../focusRing'\nimport {_responsive, rem} from '../helpers'\nimport {ThemeProps} from '../types'\n\n/**\n * @internal\n */\nexport interface TextInputInputStyleProps {\n $fontSize: number[]\n $scheme: ThemeColorSchemeKey\n $tone: CardTone\n $weight?: ThemeFontWeightKey\n}\n\n/**\n * @internal\n */\nexport interface TextInputRepresentationStyleProps {\n $hasPrefix?: boolean\n $hasSuffix?: boolean\n $scheme: ThemeColorSchemeKey\n $tone: CardTone\n $unstableDisableFocusRing?: boolean\n}\n\nexport function textInputBaseStyle(\n props: TextInputInputStyleProps & ThemeProps,\n): ReturnType<typeof css> {\n const {$scheme, $tone, $weight} = props\n const {color, font} = getTheme_v2(props.theme)\n\n return css`\n appearance: none;\n background: none;\n border: 0;\n border-radius: 0;\n outline: none;\n width: 100%;\n box-sizing: border-box;\n font-family: ${font.text.family};\n font-weight: ${($weight && font.text.weights[$weight]) || font.text.weights.regular};\n margin: 0;\n position: relative;\n z-index: 1;\n display: block;\n\n /* NOTE: This is a hack to disable Chrome’s autofill styles */\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-text-fill-color: var(--input-fg-color) !important;\n transition: background-color 5000s;\n transition-delay: 86400s /* 24h */;\n }\n\n /* &:is(textarea) */\n &[data-as='textarea'] {\n resize: none;\n }\n\n color: var(--input-fg-color);\n\n &::placeholder {\n color: var(--input-placeholder-color);\n }\n\n &[data-scheme='${$scheme}'][data-tone='${$tone}'] {\n --input-fg-color: ${color.input.default.enabled.fg};\n --input-placeholder-color: ${color.input.default.enabled.placeholder};\n\n /* enabled */\n &:not(:invalid):not(:disabled):not(:read-only) {\n --input-fg-color: ${color.input.default.enabled.fg};\n --input-placeholder-color: ${color.input.default.enabled.placeholder};\n }\n\n /* disabled */\n &:not(:invalid):disabled {\n --input-fg-color: ${color.input.default.disabled.fg};\n --input-placeholder-color: ${color.input.default.disabled.placeholder};\n }\n\n /* invalid */\n &:invalid {\n --input-fg-color: ${color.input.invalid.enabled.fg};\n --input-placeholder-color: ${color.input.invalid.enabled.placeholder};\n }\n\n /* readOnly */\n &:read-only {\n --input-fg-color: ${color.input.default.readOnly.fg};\n --input-placeholder-color: ${color.input.default.readOnly.placeholder};\n }\n }\n `\n}\n\nexport function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {\n const {font, media} = getTheme_v2(props.theme)\n\n return _responsive(media, props.$fontSize, (sizeIndex) => {\n const size = font.text.sizes[sizeIndex] || font.text.sizes[2]\n\n return {\n fontSize: rem(size.fontSize),\n lineHeight: `${size.lineHeight / size.fontSize}`,\n }\n })\n}\n\nexport function textInputRepresentationStyle(\n props: TextInputRepresentationStyleProps & ThemeProps,\n): ReturnType<typeof css> {\n const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing} = props\n const {color, input} = getTheme_v2(props.theme)\n\n return css`\n --input-box-shadow: none;\n\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n pointer-events: none;\n z-index: 0;\n\n background-color: var(--card-bg-color);\n box-shadow: var(--input-box-shadow);\n\n border-top-left-radius: ${$hasPrefix ? 0 : undefined};\n border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};\n border-top-right-radius: ${$hasSuffix ? 0 : undefined};\n border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};\n\n &[data-scheme='${$scheme}'][data-tone='${$tone}'] {\n --card-bg-color: ${color.input.default.enabled.bg};\n --card-fg-color: ${color.input.default.enabled.fg};\n\n /* enabled */\n *:not(:disabled) + &[data-border] {\n --input-box-shadow: ${focusRingBorderStyle({\n color: color.input.default.enabled.border,\n width: input.border.width,\n })};\n }\n\n /* invalid */\n *:not(:disabled):invalid + & {\n --card-bg-color: ${color.input.invalid.enabled.bg};\n --card-fg-color: ${color.input.invalid.enabled.fg};\n\n &[data-border] {\n --input-box-shadow: ${focusRingBorderStyle({\n color: color.input.invalid.enabled.border,\n width: input.border.width,\n })};\n }\n }\n\n /* focused */\n *:not(:disabled):focus + & {\n &[data-border] {\n --input-box-shadow: ${\n $unstableDisableFocusRing\n ? undefined\n : focusRingStyle({\n border: {color: color.input.default.enabled.border, width: input.border.width},\n focusRing: input.text.focusRing,\n })\n };\n }\n\n &:not([data-border]) {\n --input-box-shadow: ${\n $unstableDisableFocusRing\n ? undefined\n : focusRingStyle({focusRing: input.text.focusRing})\n };\n }\n }\n\n /* disabled */\n *:not(:invalid):disabled + & {\n --card-bg-color: ${color.input.default.disabled.bg} !important;\n --card-fg-color: ${color.input.default.disabled.fg} !important;\n --card-icon-color: ${color.input.default.disabled.fg} !important;\n\n &[data-border] {\n --input-box-shadow: ${focusRingBorderStyle({\n color: color.input.default.disabled.border,\n width: input.border.width,\n })};\n }\n }\n\n *:invalid:disabled + & {\n --card-bg-color: ${color.input.invalid.disabled.bg} !important;\n --card-fg-color: ${color.input.invalid.disabled.fg} !important;\n --card-icon-color: ${color.input.invalid.disabled.fg} !important;\n\n &[data-border] {\n --input-box-shadow: ${focusRingBorderStyle({\n color: color.input.invalid.disabled.border,\n width: input.border.width,\n })};\n }\n }\n\n /* readOnly */\n *:not(:invalid):read-only + & {\n --card-bg-color: ${color.input.default.readOnly.bg} !important;\n --card-fg-color: ${color.input.default.readOnly.fg} !important;\n }\n\n *:invalid:read-only + & {\n --card-bg-color: ${color.input.invalid.readOnly.bg} !important;\n --card-fg-color: ${color.input.invalid.readOnly.fg} !important;\n }\n\n /* hovered */\n @media (hover: hover) {\n *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n --card-bg-color: ${color.input.default.hovered.bg};\n --card-fg-color: ${color.input.default.hovered.fg};\n }\n\n *:invalid:not(:disabled):not(:read-only):hover + & {\n --card-bg-color: ${color.input.invalid.hovered.bg};\n --card-fg-color: ${color.input.invalid.hovered.fg};\n }\n\n *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n --input-box-shadow: ${focusRingBorderStyle({\n color: color.input.default.hovered.border,\n width: input.border.width,\n })};\n }\n\n *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {\n --input-box-shadow: ${focusRingBorderStyle({\n color: color.input.invalid.hovered.border,\n width: input.border.width,\n })};\n }\n }\n }\n `\n}\n","import {style} from '@vanilla-extract/css'\n\n// TextInput renders its root as a Card, whose Box styles own `display`, so the\n// flex layout comes from the `display` prop there and only the alignment lives\n// here. TextArea's root is a plain span, so it reuses that class and adds display.\nexport const textInputRoot = style({\n alignItems: 'center',\n})\n\nexport const textAreaRoot = style([\n textInputRoot,\n {\n selectors: {\n '&:not([hidden])': {\n display: 'flex',\n },\n },\n },\n])\n\nexport const inputRoot = style({\n flex: 1,\n minWidth: 0,\n display: 'block',\n position: 'relative',\n})\n","import {style} from '@vanilla-extract/css'\n\nexport const textInputLeftBox = style({\n position: 'absolute',\n top: 0,\n left: 0,\n})\n\nexport const textInputRightBox = style({\n position: 'absolute',\n top: 0,\n right: 0,\n})\n\nexport const textInputClearButton = style({\n selectors: {\n '&:not([hidden])': {\n display: 'block',\n },\n },\n})\n","import {CloseIcon} from '@sanity/icons/Close'\nimport {clsx} from 'clsx/lite'\nimport {isValidElement, useCallback, useImperativeHandle, useMemo, useRef} from 'react'\nimport {isValidElementType} from 'react-is'\nimport {styled} from 'styled-components'\n\nimport {ThemeFontWeightKey} from '../../../theme/system/font'\nimport {EMPTY_RECORD} from '../../constants'\nimport {useCustomValidity} from '../../hooks/useCustomValidity'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {\n responsiveInputPaddingStyle,\n TextInputResponsivePaddingStyleProps,\n} from '../../styles/input/responsiveInputPaddingStyle'\nimport {\n textInputBaseStyle,\n textInputFontSizeStyle,\n TextInputInputStyleProps,\n textInputRepresentationStyle,\n TextInputRepresentationStyleProps,\n} from '../../styles/input/textInputStyle'\nimport {responsiveRadiusStyle} from '../../styles/radius/radiusStyle'\nimport {ResponsiveRadiusStyleProps} from '../../styles/radius/types'\nimport {useRootTheme} from '../../theme/useRootTheme'\nimport {Radius} from '../../types/radius'\nimport {Box} from '../box/box'\nimport {Button, ButtonOwnProps} from '../button/button'\nimport {Card} from '../card/card'\nimport {Text} from '../text/text'\n\nimport {inputRoot, textInputRoot} from '../../styles/input/textInput.css'\nimport {textInputClearButton, textInputLeftBox, textInputRightBox} from './textInput.css'\n\n/**\n * @public\n */\nexport type TextInputClearButtonProps = ButtonOwnProps &\n Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>\n\n/**\n * @public\n */\nexport type TextInputType =\n | 'search'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'url'\n | 'month'\n | 'number'\n | 'password'\n | 'tel'\n | 'time'\n | 'text'\n | 'week'\n | 'color'\n\n/**\n * @public\n */\nexport interface TextInputProps {\n /**\n * @beta\n */\n __unstable_disableFocusRing?: boolean\n border?: boolean\n /**\n * @beta\n */\n clearButton?: boolean | TextInputClearButtonProps\n customValidity?: string\n fontSize?: number | number[]\n // oxlint-disable-next-line no-redundant-type-constituents\n icon?: React.ElementType | React.ReactNode\n // oxlint-disable-next-line no-redundant-type-constituents\n iconRight?: React.ElementType | React.ReactNode\n /**\n * @beta\n */\n onClear?: () => void\n padding?: number | number[]\n prefix?: React.ReactNode\n radius?: Radius | Radius[]\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n gap?: number | number[]\n suffix?: React.ReactNode\n type?: TextInputType\n weight?: ThemeFontWeightKey\n}\n\nconst CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}\n\n// Prefix and Suffix stay on styled-components: their corner radius longhands\n// must beat Card's runtime `border-radius` shorthand at equal specificity,\n// which needs both rules in the runtime stylesheet.\nconst Prefix = styled(Card).attrs({forwardedAs: 'span'})`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n & > span {\n display: block;\n margin: -1px;\n }\n`\n\nconst Suffix = styled(Card).attrs({forwardedAs: 'span'})`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n & > span {\n display: block;\n margin: -1px;\n }\n`\n\nconst Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(\n responsiveInputPaddingStyle,\n textInputBaseStyle,\n textInputFontSizeStyle,\n)\n\nconst Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(\n responsiveRadiusStyle,\n textInputRepresentationStyle,\n)\n\n// Stays on styled-components: `background-color: transparent` must beat Card's\n// runtime `background-color: var(--card-bg-color)` at equal specificity, which\n// needs both rules in the runtime stylesheet.\nconst RightCard = styled(Card)`\n background-color: transparent;\n position: absolute;\n top: 0;\n right: 0;\n`\n\n/**\n * Single line text input.\n *\n * @public\n */\nexport function TextInput(\n props: TextInputProps & Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'prefix' | 'type'>,\n) {\n const {\n __unstable_disableFocusRing,\n border = true,\n clearButton,\n disabled = false,\n fontSize: fontSizeProp = 2,\n gap = 3,\n icon: IconComponent,\n iconRight: IconRightComponent,\n onClear,\n padding: paddingProp = 3,\n prefix,\n radius: radiusProp = 2,\n readOnly,\n ref: forwardedRef,\n suffix,\n customValidity,\n type = 'text',\n weight,\n ...restProps\n } = props\n const ref = useRef<HTMLInputElement | null>(null)\n\n const rootTheme = useRootTheme()\n\n const fontSize = _getArrayProp(fontSizeProp)\n const padding = _getArrayProp(paddingProp)\n const radius = _getArrayProp(radiusProp)\n const space = _getArrayProp(gap)\n\n // Transient properties\n const $hasClearButton = Boolean(clearButton)\n const $hasIcon = Boolean(IconComponent)\n const $hasIconRight = Boolean(IconRightComponent)\n const $hasSuffix = Boolean(suffix)\n const $hasPrefix = Boolean(prefix)\n\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n forwardedRef,\n () => ref.current,\n )\n\n useCustomValidity(ref, customValidity)\n\n // Prevent the clear button from taking the focus away from the input\n const handleClearMouseDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault()\n event.stopPropagation()\n }, [])\n\n const handleClearClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault()\n event.stopPropagation()\n\n if (onClear) onClear()\n\n // Focus the input, in case focus has been lost when clicking the clear button\n ref.current?.focus()\n },\n [onClear, ref],\n )\n\n // Render prefix (memoized)\n const prefixNode = useMemo(\n () =>\n prefix && (\n <Prefix borderTop borderLeft borderBottom radius={radius} sizing=\"border\" tone=\"inherit\">\n <span>{prefix}</span>\n </Prefix>\n ),\n [prefix, radius],\n )\n\n // Render presentation (memoized)\n const presentationNode = useMemo(\n () => (\n <Presentation\n $hasPrefix={$hasPrefix}\n $unstableDisableFocusRing={__unstable_disableFocusRing}\n $hasSuffix={$hasSuffix}\n $radius={radius}\n $scheme={rootTheme.scheme}\n $tone={rootTheme.tone}\n data-border={border ? '' : undefined}\n data-scheme={rootTheme.scheme}\n data-tone={rootTheme.tone}\n >\n {IconComponent && (\n <Box className={textInputLeftBox} padding={padding}>\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n </Box>\n )}\n\n {!$hasClearButton && IconRightComponent && (\n <Box className={textInputRightBox} padding={padding}>\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n </Box>\n )}\n </Presentation>\n ),\n [\n __unstable_disableFocusRing,\n border,\n fontSize,\n IconComponent,\n IconRightComponent,\n padding,\n radius,\n rootTheme,\n $hasClearButton,\n $hasPrefix,\n $hasSuffix,\n ],\n )\n\n // Render clear button (memoized)\n const clearButtonBoxPadding = useMemo(\n () =>\n padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n }),\n [padding],\n )\n const clearButtonPadding = useMemo(\n () =>\n padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 0\n if (v === 2) return 1\n\n return v - 1\n }),\n [padding],\n )\n const clearButtonProps: TextInputClearButtonProps =\n typeof clearButton === 'object' ? clearButton : EMPTY_RECORD\n const clearButtonNode = useMemo(\n () =>\n !disabled &&\n !readOnly &&\n clearButton && (\n <RightCard\n forwardedAs=\"span\"\n padding={clearButtonBoxPadding}\n style={CLEAR_BUTTON_BOX_STYLE}\n tone={customValidity ? 'critical' : 'inherit'}\n >\n <Button\n aria-label=\"Clear\"\n data-qa=\"clear-button\"\n fontSize={fontSize}\n icon={CloseIcon}\n mode=\"bleed\"\n padding={clearButtonPadding}\n radius={radius}\n {...clearButtonProps}\n className={clsx(textInputClearButton, clearButtonProps.className)}\n onClick={handleClearClick}\n onMouseDown={handleClearMouseDown}\n />\n </RightCard>\n ),\n [\n clearButton,\n clearButtonBoxPadding,\n clearButtonPadding,\n clearButtonProps,\n customValidity,\n disabled,\n fontSize,\n handleClearClick,\n handleClearMouseDown,\n radius,\n readOnly,\n ],\n )\n\n // Render suffix (memoized)\n const suffixNode = useMemo(\n () =>\n suffix && (\n <Suffix borderTop borderRight borderBottom radius={radius} sizing=\"border\" tone=\"inherit\">\n <span>{suffix}</span>\n </Suffix>\n ),\n [radius, suffix],\n )\n\n return (\n <Card\n as=\"span\"\n className={textInputRoot}\n data-ui=\"TextInput\"\n display=\"flex\"\n tone={rootTheme.tone}\n >\n {prefixNode}\n\n <span className={inputRoot}>\n <Input\n data-as=\"input\"\n data-scheme={rootTheme.scheme}\n data-tone={rootTheme.tone}\n {...restProps}\n $fontSize={fontSize}\n $iconLeft={$hasIcon}\n $iconRight={$hasIconRight || $hasClearButton}\n $padding={padding}\n $scheme={rootTheme.scheme}\n $space={space}\n $tone={rootTheme.tone}\n $weight={weight}\n disabled={disabled}\n readOnly={readOnly}\n ref={ref}\n type={type}\n />\n\n {presentationNode}\n {clearButtonNode}\n </span>\n\n {suffixNode}\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAGA,SAAgB,KAAK,IAA4B;CAC/C,IAAM,UAAU,sBAAsB,EAAE;CAExC,aAAa;EACX,qBAAqB,OAAO;CAC9B;AACF;;;;AAKA,SAAgB,MAAM,IAA4B;CAChD,IAAI,eAAoC,MAElC,eAAe,WAAW;EAC9B,eAAe,KAAK,EAAE;CACxB,CAAC;CAED,aAAa;EAGX,AAFI,gBAAc,aAAa,GAE/B,aAAa;CACf;AACF;;;;ACVA,SAAgB,UAAU,SAA+B;CACvD,OAAO,EAAQ,SAAS,iBAAkB,QAAQ,SAAS,SAAS,aAAa;AACnF;;;;AAKA,SAAgB,YAAY,SAA+B;CAwBzD,OAtBE,QAAQ,WAAW,KAClB,QAAQ,aAAa,KAAK,QAAQ,aAAa,UAAU,MAAM,OAEzD,KAGL,oBAAoB,OAAO,IACtB,EAAQ,QAAQ,QAAS,QAAQ,QAAQ,WAG9C,mBAAmB,OAAO,IACrB,QAAQ,SAAS,YAAY,QAAQ,SAAS,UAAU,CAAC,QAAQ,WAIxE,oBAAoB,OAAO,KAC3B,oBAAoB,OAAO,KAC3B,sBAAsB,OAAO,IAEtB,CAAC,QAAQ,WAGX;AACT;;;;AAKA,SAAgB,aAAa,SAA+B;CAC1D,IAAI,CAAC,YAAY,OAAO,GACtB,OAAO;CAKT,IAAI;EACF,QAAQ,MAAM;CAChB,QAAQ,CAER;CAIA,OAAO,SAAS,kBAAkB;AACpC;;;;AAKA,SAAgB,qBAAqB,SAA+B;CAClE,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,WAAW,QAAQ,KAAK;EAClD,IAAM,QAAQ,QAAQ,WAAW;EAEjC,IAAI,cAAc,KAAK,MAAM,aAAa,KAAK,KAAK,qBAAqB,KAAK,IAC5E,OAAO;CAEX;CAEA,OAAO;AACT;;;;AAKA,SAAgB,oBAAoB,SAA+B;CACjE,KAAK,IAAI,IAAI,QAAQ,WAAW,SAAS,GAAG,KAAK,GAAG,KAAK;EACvD,IAAM,QAAQ,QAAQ,WAAW;EAEjC,IAAI,cAAc,KAAK,MAAM,aAAa,KAAK,KAAK,oBAAoB,KAAK,IAC3E,OAAO;CAEX;CAEA,OAAO;AACT;;;;AC9FA,SAAgB,kBACd,KACA,gBACM;eACIA,IAEPC;CAFH,AACiC,EAAA,OAAA,kBAAA,EAAA,OAA/BC,OADQ,WAAM;EACd,IAAI,SAAS,kBAAkB,kBAAkB,EAAE;CACrD,GAAG,KAAA,CAAC,gBAAgB,GAAG,GADU,EAAA,KAAA,gBAA/BA,EAAAA,KAAAA,qDADF,UAAUF,IAEPC,EAAqB;AAC1B;ACCA,SAAgB,4BACd,OACa;CACb,IAAM,EAAC,WAAW,WAAW,YAAY,UAAU,WAAU,OACvD,EAAC,MAAM,OAAO,UAAS,YAAY,MAAM,KAAK,GAC9C,MAAM,KAAK,IAAI,SAAS,QAAQ,OAAO,QAAQ,UAAU,MAAM,GAC/D,WAAqB,CAAC,GACtB,SAAmB,CAAC,GACpB,YAAsB,CAAC;CAE7B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,KAAK,GAG5B,AAFA,UAAU,KAAK,UAAU,OAAO,KAAA,IAAY,UAAU,IAAI,KAAK,UAAU,IACzE,SAAS,KAAK,SAAS,OAAO,KAAA,IAAY,SAAS,IAAI,KAAK,SAAS,IACrE,OAAO,KAAK,OAAO,OAAO,KAAA,IAAY,OAAO,IAAI,KAAK,OAAO;CAG/D,OAAO,YAAY,OAAO,WAAW,GAAG,MAAM;EAC5C,IAAM,OAAO,KAAK,KAAK,MAAM,UAAU,OAAO,KAAK,KAAK,MAAM,IACxD,SAAS,KAAK,aAAa,KAAK,iBAAiB,KAAK,iBACtD,IAAI,MAAM,SAAS,KACnB,IAAI,MAAM,OAAO,KAEjB,SAAS;GACb,YAAY,IAAI,IAAI,KAAK,cAAc;GACvC,cAAc,IAAI,CAAC;GACnB,eAAe,IAAI,IAAI,KAAK,eAAe;GAC3C,aAAa,IAAI,CAAC;EACpB;EAKA,OAHI,eAAY,OAAO,eAAe,IAAI,IAAI,SAAS,CAAC,IACpD,cAAW,OAAO,cAAc,IAAI,IAAI,SAAS,CAAC,IAE/C;CACT,CAAC;AACH;AAEA,SAAgB,qCACd,OAKa;CACb,OAAO,4BAA4B;EAAC,GAAG;EAAO,YAAY;CAAI,CAAC;AACjE;ACzBA,SAAgB,mBACd,OACwB;CACxB,IAAM,EAAC,SAAS,OAAO,YAAW,OAC5B,EAAC,OAAO,SAAQ,YAAY,MAAM,KAAK;CAE7C,OAAO,GAAG,sHAQO,KAAK,KAAK,OAAO,eAChB,WAAW,KAAK,KAAK,QAAQ,YAAa,KAAK,KAAK,QAAQ,QAAQ,4YA2BnE,QAAQ,gBAAgB,MAAM,sBACzB,MAAM,MAAM,QAAQ,QAAQ,GAAG,6BACtB,MAAM,MAAM,QAAQ,QAAQ,YAAY,mEAI/C,MAAM,MAAM,QAAQ,QAAQ,GAAG,6BACtB,MAAM,MAAM,QAAQ,QAAQ,YAAY,8CAKjD,MAAM,MAAM,QAAQ,SAAS,GAAG,6BACvB,MAAM,MAAM,QAAQ,SAAS,YAAY,+BAKlD,MAAM,MAAM,QAAQ,QAAQ,GAAG,6BACtB,MAAM,MAAM,QAAQ,QAAQ,YAAY,iCAKjD,MAAM,MAAM,QAAQ,SAAS,GAAG,6BACvB,MAAM,MAAM,QAAQ,SAAS,YAAY;AAI9E;AAEA,SAAgB,uBAAuB,OAA2D;CAChG,IAAM,EAAC,MAAM,UAAS,YAAY,MAAM,KAAK;CAE7C,OAAO,YAAY,OAAO,MAAM,YAAY,cAAc;EACxD,IAAM,OAAO,KAAK,KAAK,MAAM,cAAc,KAAK,KAAK,MAAM;EAE3D,OAAO;GACL,UAAU,IAAI,KAAK,QAAQ;GAC3B,YAAY,GAAG,KAAK,aAAa,KAAK;EACxC;CACF,CAAC;AACH;AAEA,SAAgB,6BACd,OACwB;CACxB,IAAM,EAAC,YAAY,YAAY,SAAS,OAAO,8BAA6B,OACtE,EAAC,OAAO,UAAS,YAAY,MAAM,KAAK;CAE9C,OAAO,GAAG,uNAekB,aAAa,IAAI,KAAA,EAAU,6BACxB,aAAa,IAAI,KAAA,EAAU,2BAC7B,aAAa,IAAI,KAAA,EAAU,8BACxB,aAAa,IAAI,KAAA,EAAU,kBAExC,QAAQ,gBAAgB,MAAM,qBAC1B,MAAM,MAAM,QAAQ,QAAQ,GAAG,mBAC/B,MAAM,MAAM,QAAQ,QAAQ,GAAG,wDAI1B,qBAAqB;EACzC,OAAO,MAAM,MAAM,QAAQ,QAAQ;EACnC,OAAO,MAAM,OAAO;CACtB,CAAC,EAAE,iDAKgB,MAAM,MAAM,QAAQ,QAAQ,GAAG,mBAC/B,MAAM,MAAM,QAAQ,QAAQ,GAAG,qCAG1B,qBAAqB;EACzC,OAAO,MAAM,MAAM,QAAQ,QAAQ;EACnC,OAAO,MAAM,OAAO;CACtB,CAAC,EAAE,kEAQD,4BACI,KAAA,IACA,eAAe;EACb,QAAQ;GAAC,OAAO,MAAM,MAAM,QAAQ,QAAQ;GAAQ,OAAO,MAAM,OAAO;EAAK;EAC7E,WAAW,MAAM,KAAK;CACxB,CAAC,EACN,4CAKC,4BACI,KAAA,IACA,eAAe,EAAC,WAAW,MAAM,KAAK,UAAS,CAAC,EACrD,kDAMgB,MAAM,MAAM,QAAQ,SAAS,GAAG,8BAChC,MAAM,MAAM,QAAQ,SAAS,GAAG,gCAC9B,MAAM,MAAM,QAAQ,SAAS,GAAG,gDAG7B,qBAAqB;EACzC,OAAO,MAAM,MAAM,QAAQ,SAAS;EACpC,OAAO,MAAM,OAAO;CACtB,CAAC,EAAE,4CAKc,MAAM,MAAM,QAAQ,SAAS,GAAG,8BAChC,MAAM,MAAM,QAAQ,SAAS,GAAG,gCAC9B,MAAM,MAAM,QAAQ,SAAS,GAAG,gDAG7B,qBAAqB;EACzC,OAAO,MAAM,MAAM,QAAQ,SAAS;EACpC,OAAO,MAAM,OAAO;CACtB,CAAC,EAAE,mDAMc,MAAM,MAAM,QAAQ,SAAS,GAAG,8BAChC,MAAM,MAAM,QAAQ,SAAS,GAAG,uDAIhC,MAAM,MAAM,QAAQ,SAAS,GAAG,8BAChC,MAAM,MAAM,QAAQ,SAAS,GAAG,6GAM9B,MAAM,MAAM,QAAQ,QAAQ,GAAG,mBAC/B,MAAM,MAAM,QAAQ,QAAQ,GAAG,uEAI/B,MAAM,MAAM,QAAQ,QAAQ,GAAG,mBAC/B,MAAM,MAAM,QAAQ,QAAQ,GAAG,yGAI5B,qBAAqB;EACzC,OAAO,MAAM,MAAM,QAAQ,QAAQ;EACnC,OAAO,MAAM,OAAO;CACtB,CAAC,EAAE,mGAImB,qBAAqB;EACzC,OAAO,MAAM,MAAM,QAAQ,QAAQ;EACnC,OAAO,MAAM,OAAO;CACtB,CAAC,EAAE;AAKb;;AGpKA,MAAM,yBAA8C,EAAC,QAAQ,EAAC,GAKxD,SAAS,OAAO,IAAI,CAAC,CAAC,MAAM,EAAC,aAAa,OAAM,CAAC,CAAC,CAAA,WAAA;;;iGAUlD,SAAS,OAAO,IAAI,CAAC,CAAC,MAAM,EAAC,aAAa,OAAM,CAAC,CAAC,CAAA,WAAA;;;+FAUlD,QAAQ,uBAAO,MAAA,WAAA;;;AACnB,CAAA,CAAA,CAAA,6BACA,oBACA,sBACF,GAEM,eAAe,uBAAO,KAAA,WAAA;;;AAC1B,CAAA,CAAA,CAAA,uBACA,4BACF,GAKM,YAAY,OAAO,IAAI,CAAC,CAAA,WAAA;;;;;;;;;AAY9B,SAAgB,UACd,OACA;gBAQQ,eACK,oBAPX,6BAEA,aAaA,gBAFK,cALL,SAEA,QAEA,UAMG,WAJH,QAbAE,IAEAC,IACUC,IACVC,IAISC,IAEDC,IAKRC,IACA;CAEE,AAAA,EAAA,OAAA,wVApBE,CACJ,6BACA,QAAA,IACA,aACA,UAAA,IACA,UAAUJ,IACV,KAAA,IACA,MAAM,eACN,WAAW,oBACX,SACA,SAASE,IACT,QACA,QAAQC,IACR,UACA,KAAK,cACL,QACA,gBACA,MAAA,IACA,QACA,GAAA,aACE;CAlBF,IAAA,SAAA,OAAA,KAAA,KAAAL,IAEA,WAAA,OAAA,KAAA,KAAAC,IACU,eAAA,OAAA,KAAA,IAAe,IAAfC,IACV,MAAA,OAAA,KAAA,IAAM,IAANC,IAIS,cAAA,OAAA,KAAA,IAAc,IAAdC,IAED,aAAA,OAAA,KAAA,IAAa,IAAbC,IAKR,OAAA,OAAA,KAAA,IAAO,SAAPC,IAII,MAAM,OAAgC,IAAI,GAE1C,YAAY,aAAa,GAEdC;CAAc,AAAA,EAAA,QAAA,6BAAd,KAAA,cAAc,YAAY,GAAZ,EAAA,MAAA;CAA/B,IAAM,WAAWA,IACDC;CAAc,AAAA,EAAA,QAAA,4BAAd,KAAA,cAAc,WAAW,GAAX,EAAA,MAAA;CAA9B,IAAM,UAAUA,IACDC;CAAc,AAAA,EAAA,QAAA,2BAAd,KAAA,cAAc,UAAU,GAAV,EAAA,MAAA;CAA7B,IAAM,SAASA,IACDC;CAAc,AAAA,EAAA,QAAA,qBAAd,MAAA,cAAc,GAAG,GAAH,EAAA,MAAA;CAA5B,IAAM,QAAQA,KAGR,kBAAkB,EAAQ,aAC1B,WAAW,EAAQ,eACnB,gBAAgB,EAAQ,oBACxB,aAAa,EAAQ,QACrB,aAAa,EAAQ,QAIzBC;CAGF,qDAHQ,YAAA,IAAI,qCAFZ,oBACE,cACAA,GACF,GAEA,kBAAkB,KAAK,cAAc;CAGrC,IAAM,uBAAuBC,OAM3BC;CAIM,AAAA,EAAA,QAAA,yBAJN,OAAC,YAA+C;EAO9C,AANA,QAAM,eAAe,GACrB,QAAM,gBAAgB,GAElB,WAAS,QAAQ,GAGrB,IAAI,SAAS,MAAM;CACrB,GAJM,EAAA,MAAA;CALR,IAAM,mBAAmBC,KAgBrBC;CACoD,AAAA,EAAA,QAAA,UAAA,EAAA,QAAA,UADpD,MAAA,UACE,oBAAC,QAAD;EAAQ,WAAA;EAAU,YAAA;EAAW,cAAA;EAAqB;EAAQ,QAAO;EAAS,MAAK;EAC7E,UAAA,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA;CACd,CAAA,GAHV,EAAA,MAAA,QACoD,EAAA,MAAA;CAHxD,IAAM,aAAaC,KAoBA,MAAA,SAAS,KAAK,KAAA,GAI1BC;CAEe,AAAA,EAAA,QAAA,iBAAA,EAAA,QAAA,YAAA,EAAA,QAD6B,WAD5C,MAAA,iBACC,oBAAC,KAAD;EAAK,WAAA;EAAsC;EACzC,UAAA,qBAAC,MAAD;GAAM,MAAM;GAAZ,UAAA,CACG,eAAe,aAAa,KAAK,eACjC,mBAAmB,aAAa,KAAK,oBAAC,eAAD,CAAgB,CAAA,CAClD;;CACH,CAAA,GANN,EAAA,MAAA,eAEe,EAAA,MAAA,UAD6B,EAAA,MAAA;CAQ5CC,IAAAA;CAAC,AAAA,EAAA,QAAA,mBAAA,EAAA,QAAmB,sBAAA,EAAA,QAEL,YAAA,EAAA,QAD8B,WAD7C,MAAA,CAAC,mBAAmB,sBACnB,oBAAC,KAAD;EAAK,WAAA;EAAuC;EAC1C,UAAA,qBAAC,MAAD;GAAM,MAAM;GAAZ,UAAA,CACG,eAAe,kBAAkB,KAAK,oBACtC,mBAAmB,kBAAkB,KAAK,oBAAC,oBAAD,CAAqB,CAAA,CAC5D;;CACH,CAAA,GANL,EAAA,MAAA,iBAAmB,EAAA,MAAA,oBAEL,EAAA,MAAA,UAD8B,EAAA,MAAA;CArBhDC,IAAAA;CACc,AAAA,EAAA,QAAA,cAAA,EAAA,QAEA,cAAA,EAAA,QADe,+BAAA,EAAA,QAElB,UAAA,EAAA,QACUC,UAAAA,UAAAA,EAAAA,QACFC,UAAAA,QAAAA,EAAAA,QACJC,OAAAA,EAAAA,QAIZL,OAAAA,EAAAA,QASAC,OApBH,MAAA,qBAAC,cAAD;EACc;EACZ,2BAA2B;EACf;EACZ,SAAS;EACT,SAAS,UAAU;EACnB,OAAO,UAAU;EACjB,eAAaI;EACb,eAAa,UAAU;EACvB,aAAW,UAAU;EATvB,UAAA,CAWGL,KASAC,GAQW;KA3BA,EAAA,MAAA,YAEA,EAAA,MAAA,YADe,EAAA,MAAA,6BAElB,EAAA,MAAA,QACUE,EAAAA,MAAAA,UAAAA,QACFC,EAAAA,MAAAA,UAAAA,MACJC,EAAAA,MAAAA,KAIZL,EAAAA,MAAAA,KASAC,EAAAA,MAAAA;CAtBP,IAAM,mBAAmBK,KAkDrBC;oCAAQ,MAAA,QAAA,IAAIC,MAMX,GAND,EAAA,MAAA;CAFJ,IAAM,wBAAwBC,KAa1BC;oCAAQ,MAAA,QAAA,IAAIC,MAMX,GAND,EAAA,MAAA;CAFJ,IAAM,qBAAqBC,KAWrB,mBACJ,OAAO,eAAgB,WAAW,cAAc,cAG9CC;CAEA,AAAA,EAAA,QAAA,eAAA,EAAA,QAGa,yBAAA,EAAA,QAUE,sBAAA,EAAA,QAG6BC,oBAAAA,EAAAA,QAXlC,kBAAA,EAAA,QAPT,YAAA,EAAA,QAYe,YAAA,EAAA,QAOD,oBAAA,EAAA,QAHD,UAAA,EAAA,QAfb,YADD,MAAA,CAAC,YACD,CAAC,YACD,eACE,oBAAC,WAAD;EACE,aAAY;EACZ,SAAS;EACT,OAAO;EACP,MAAM,iBAAiB,aAAa;EAEpC,UAAA,oBAAC,QAAD;GACE,cAAW;GACX,WAAQ;GACE;GACV,MAAM;GACN,MAAK;GACL,SAAS;GACD;GACR,GAAI;GACJ,WAAW,KAAA,YAA2B,iBAAiB,SAAS;GAChE,SAAS;GACT,aAAa;EACd,CAAA;CACQ,CAAA,GApBb,EAAA,MAAA,aAGa,EAAA,MAAA,uBAUE,EAAA,MAAA,oBAG6BA,EAAAA,MAAAA,kBAXlC,EAAA,MAAA,gBAPT,EAAA,MAAA,UAYe,EAAA,MAAA,UAOD,EAAA,MAAA,kBAHD,EAAA,MAAA,QAfb,EAAA,MAAA;CAHL,IAAM,kBAAkBC,KA4CpBC;CACqD,AAAA,EAAA,QAAA,UAAA,EAAA,QADrD,UACE,MAAA,UAAA,oBAAC,QAAD;EAAQ,WAAA;EAAU,aAAA;EAAY,cAAA;EAAqB;EAAQ,QAAO;EAAS,MAAK;EAC9E,UAAA,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA;CACd,CAAA,GAF2C,EAAA,MAAA,QADrD,EAAA,MAAA;CAFJ,IAAM,aAAaC,KA4BC,MAAA,iBAAiB,iBAP/BC;CAMa,AAAA,EAAA,QAAA,YAAA,EAAA,QAOD,YAAA,EAAA,QARC,YAAA,EAAA,QAGD,WAAA,EAAA,QAMA,YAAA,EAAA,QAVN,aAAA,EAAA,QAFmBf,UAAAA,UAAAA,EAAAA,QACFC,UAAAA,QAAAA,EAAAA,QAOb,SAAA,EAAA,QAHIe,OAAAA,EAAAA,QASN,QAAA,EAAA,QAJG,UAZX,MAAA,oBAAC,OAAD;EACE,WAAQ;EACR,eAAa,UAAU;EACvB,aAAW,UAAU;EACrB,GAAI;EACJ,WAAW;EACX,WAAW;EACX,YAAYA;EACZ,UAAU;EACV,SAAS,UAAU;EACnB,QAAQ;EACR,OAAO,UAAU;EACjB,SAAS;EACC;EACA;EACL;EACC;CACP,CAAA,GAXY,EAAA,MAAA,UAOD,EAAA,MAAA,UARC,EAAA,MAAA,UAGD,EAAA,MAAA,SAMA,EAAA,MAAA,UAVN,EAAA,MAAA,WAFmBhB,EAAAA,MAAAA,UAAAA,QACFC,EAAAA,MAAAA,UAAAA,MAOb,EAAA,MAAA,OAHIe,EAAAA,MAAAA,KASN,EAAA,MAAA,MAJG,EAAA,MAAA;CAbbC,IAAAA;CAqBG,AAAA,EAAA,QAAA,mBAAA,EAAA,QADA,oBAAA,EAAA,QAnBDF,OADF,MAAA,qBAAC,QAAD;EAAM,WAAW;EAAjB,UAAA;GACEA;GAmBC;GACA;EACG;KADH,EAAA,MAAA,iBADA,EAAA,MAAA,kBAnBDA,EAAAA,MAAAA;CAVJG,IAAAA;CADF,OAQK,EAAA,QAAA,cAAA,EAAA,QAFejB,UAAAA,QAAAA,EAAAA,QA4Bf,cAAA,EAAA,QAxBDgB,OATF,MAAA,qBAAC,MAAD;EACE,IAAG;EACH,WAAW;EACX,WAAQ;EACR,SAAQ;EACR,MAAM,UAAU;EALlB,UAAA;GAOG;GAEDA;GAwBC;EACG;KA3BH,EAAA,MAAA,YAFehB,EAAAA,MAAAA,UAAAA,MA4Bf,EAAA,MAAA,YAxBDgB,EAAAA,MAAAA,iCATFC;AAoCJ;AApGkB,SAAA,OAAC,KAAM;CAKjB,OAJIC,QAAM,KACNA,QAAM,IAAU,IAChBA,QAAM,IAAU,IAEbA,MAAI;AACb;AAjBY,SAAA,OAAC,GAAM;CAKjB,OAJI,MAAM,IAAU,IAChB,MAAM,KACN,MAAM,IAAU,IAEb,IAAI;AACb;AAtFqC,SAAA,MAAC,OAA+C;CAEvF,AADA,MAAM,eAAe,GACrB,MAAM,gBAAgB;AACxB"}
package/dist/toast.js CHANGED
@@ -1,9 +1,9 @@
1
1
  "use client";
2
- import { _ as useTheme_v2, d as createGlobalScopedContext, i as usePrefersReducedMotion, n as LayerProvider, r as isRecord, s as Card, t as useLayer, y as Box } from "./useLayer-D1usxIE0.js";
3
- import { t as Flex } from "./flex-DmbDG2ks.js";
4
- import { n as Text, t as Stack } from "./stack-rsNFPq2-.js";
5
- import { t as Button } from "./button-Dh_M2fYx.js";
6
- import { t as Grid } from "./grid-6JSgMj1O.js";
2
+ import { _ as useTheme_v2, d as createGlobalScopedContext, i as usePrefersReducedMotion, n as LayerProvider, r as isRecord, s as Card, t as useLayer, y as Box } from "./useLayer-ONr7wTUN.js";
3
+ import { t as Flex } from "./flex-JVQRW_e_.js";
4
+ import { n as Text, t as Stack } from "./stack-Bue-701Y.js";
5
+ import { t as Button } from "./button-D8Ge5vTw.js";
6
+ import { t as Grid } from "./grid-Dw7q0_YV.js";
7
7
  import { c } from "react/compiler-runtime";
8
8
  import { clsx } from "clsx/lite";
9
9
  import { startTransition, useContext, useState, useSyncExternalStore } from "react";
@@ -36,7 +36,7 @@ const ROLES = {
36
36
  * @public
37
37
  */
38
38
  function Toast(props) {
39
- let $ = c(54), className, closable, description, duration, onClose, restProps, status, t0, title, updatedAt;
39
+ let $ = c(51), className, closable, description, duration, onClose, restProps, status, t0, title, updatedAt;
40
40
  $[0] === props ? (className = $[1], closable = $[2], description = $[3], duration = $[4], onClose = $[5], restProps = $[6], status = $[7], t0 = $[8], title = $[9], updatedAt = $[10]) : ({className, closable, description, duration, onClose, radius: t0, title, status, updatedAt, ...restProps} = props, $[0] = props, $[1] = className, $[2] = closable, $[3] = description, $[4] = duration, $[5] = onClose, $[6] = restProps, $[7] = status, $[8] = t0, $[9] = title, $[10] = updatedAt);
41
41
  let radius = t0 === void 0 ? 3 : t0, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status", visualDuration = usePrefersReducedMotion() ? 0 : .26, t1;
42
42
  $[11] === visualDuration ? t1 = $[12] : (t1 = visualDuration ? {
@@ -45,39 +45,33 @@ function Toast(props) {
45
45
  bounce: .25
46
46
  } : { duration: 0 }, $[11] = visualDuration, $[12] = t1);
47
47
  let transition = t1, hasDuration = duration && isFinite(duration) && duration < 20736e5, t2;
48
- $[13] === Symbol.for("react.memo_cache_sentinel") ? (t2 = ["hidden", "initial"], $[13] = t2) : t2 = $[13];
49
- let initial = t2, t3;
50
- $[14] === Symbol.for("react.memo_cache_sentinel") ? (t3 = ["visible", "slideIn"], $[14] = t3) : t3 = $[14];
51
- let animate = t3, t4;
52
- $[15] === Symbol.for("react.memo_cache_sentinel") ? (t4 = ["hidden", "slideOut"], $[15] = t4) : t4 = $[15];
53
- let exit = t4, t5;
54
- $[16] === className ? t5 = $[17] : (t5 = clsx(toast, className), $[16] = className, $[17] = t5);
55
- let t6 = hasDuration ? "" : void 0, t7;
56
- $[18] === title ? t7 = $[19] : (t7 = title && /* @__PURE__ */ jsx(Text, {
48
+ $[13] === className ? t2 = $[14] : (t2 = clsx(toast, className), $[13] = className, $[14] = t2);
49
+ let t3 = hasDuration ? "" : void 0, t4;
50
+ $[15] === title ? t4 = $[16] : (t4 = title && /* @__PURE__ */ jsx(Text, {
57
51
  size: 1,
58
52
  weight: "medium",
59
53
  children: title
60
- }), $[18] = title, $[19] = t7);
61
- let t8;
62
- $[20] !== description || $[21] !== transition ? (t8 = description && /* @__PURE__ */ jsx(MotionText, {
54
+ }), $[15] = title, $[16] = t4);
55
+ let t5;
56
+ $[17] !== description || $[18] !== transition ? (t5 = description && /* @__PURE__ */ jsx(MotionText, {
63
57
  muted: !0,
64
58
  size: 1,
65
59
  variants: content,
66
60
  transition,
67
61
  children: description
68
- }), $[20] = description, $[21] = transition, $[22] = t8) : t8 = $[22];
69
- let t9;
70
- $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsx(Flex, {
62
+ }), $[17] = description, $[18] = transition, $[19] = t5) : t5 = $[19];
63
+ let t6;
64
+ $[20] !== t4 || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsx(Flex, {
71
65
  className: toastText,
72
66
  flex: 1,
73
67
  padding: 3,
74
68
  children: /* @__PURE__ */ jsxs(Stack, {
75
69
  gap: 3,
76
- children: [t7, t8]
70
+ children: [t4, t5]
77
71
  })
78
- }), $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25];
79
- let t10;
80
- $[26] !== buttonTone || $[27] !== closable || $[28] !== onClose ? (t10 = closable && /* @__PURE__ */ jsx(Box, {
72
+ }), $[20] = t4, $[21] = t5, $[22] = t6) : t6 = $[22];
73
+ let t7;
74
+ $[23] !== buttonTone || $[24] !== closable || $[25] !== onClose ? (t7 = closable && /* @__PURE__ */ jsx(Box, {
81
75
  padding: 1,
82
76
  children: /* @__PURE__ */ jsx(Button, {
83
77
  as: "button",
@@ -88,17 +82,18 @@ function Toast(props) {
88
82
  onClick: onClose,
89
83
  style: { verticalAlign: "top" }
90
84
  })
91
- }), $[26] = buttonTone, $[27] = closable, $[28] = onClose, $[29] = t10) : t10 = $[29];
92
- let t11;
93
- $[30] !== t10 || $[31] !== t9 || $[32] !== transition ? (t11 = /* @__PURE__ */ jsxs(MotionFlex, {
85
+ }), $[23] = buttonTone, $[24] = closable, $[25] = onClose, $[26] = t7) : t7 = $[26];
86
+ let t8;
87
+ $[27] !== t6 || $[28] !== t7 || $[29] !== transition ? (t8 = /* @__PURE__ */ jsxs(MotionFlex, {
94
88
  align: "flex-start",
95
89
  variants: content,
96
90
  transition,
97
- children: [t9, t10]
98
- }), $[30] = t10, $[31] = t9, $[32] = transition, $[33] = t11) : t11 = $[33];
99
- let t12;
100
- $[34] !== cardTone || $[35] !== duration || $[36] !== hasDuration || $[37] !== onClose || $[38] !== radius || $[39] !== transition || $[40] !== updatedAt || $[41] !== visualDuration ? (t12 = hasDuration && /* @__PURE__ */ jsxs(motion.div, {
91
+ children: [t6, t7]
92
+ }), $[27] = t6, $[28] = t7, $[29] = transition, $[30] = t8) : t8 = $[30];
93
+ let t9;
94
+ $[31] !== cardTone || $[32] !== duration || $[33] !== hasDuration || $[34] !== onClose || $[35] !== radius || $[36] !== transition || $[37] !== updatedAt || $[38] !== visualDuration ? (t9 = hasDuration && /* @__PURE__ */ jsxs(motion.div, {
101
95
  className: "_1a5lj7y2",
96
+ "data-ui": "ToastLoadingBar",
102
97
  variants: content,
103
98
  transition,
104
99
  children: [/* @__PURE__ */ jsx(Card, {
@@ -111,14 +106,14 @@ function Toast(props) {
111
106
  tone: cardTone,
112
107
  visualDuration
113
108
  }, `progress-${updatedAt}`)]
114
- }), $[34] = cardTone, $[35] = duration, $[36] = hasDuration, $[37] = onClose, $[38] = radius, $[39] = transition, $[40] = updatedAt, $[41] = visualDuration, $[42] = t12) : t12 = $[42];
115
- let t13;
116
- return $[43] !== cardTone || $[44] !== radius || $[45] !== restProps || $[46] !== role || $[47] !== t11 || $[48] !== t12 || $[49] !== t5 || $[50] !== t6 || $[51] !== transition || $[52] !== visualDuration ? (t13 = /* @__PURE__ */ jsxs(MotionCard, {
117
- className: t5,
109
+ }), $[31] = cardTone, $[32] = duration, $[33] = hasDuration, $[34] = onClose, $[35] = radius, $[36] = transition, $[37] = updatedAt, $[38] = visualDuration, $[39] = t9) : t9 = $[39];
110
+ let t10;
111
+ return $[40] !== cardTone || $[41] !== radius || $[42] !== restProps || $[43] !== role || $[44] !== t2 || $[45] !== t3 || $[46] !== t8 || $[47] !== t9 || $[48] !== transition || $[49] !== visualDuration ? (t10 = /* @__PURE__ */ jsxs(MotionCard, {
112
+ className: t2,
118
113
  "data-ui": "Toast",
119
114
  role,
120
115
  ...restProps,
121
- "data-has-duration": t6,
116
+ "data-has-duration": t3,
122
117
  custom: visualDuration,
123
118
  radius,
124
119
  shadow: 2,
@@ -126,12 +121,12 @@ function Toast(props) {
126
121
  as: "li",
127
122
  layout: "position",
128
123
  variants: container,
129
- initial,
130
- animate,
131
- exit,
124
+ initial: containerInitial,
125
+ animate: containerAnimate,
126
+ exit: containerExit,
132
127
  transition,
133
- children: [t11, t12]
134
- }), $[43] = cardTone, $[44] = radius, $[45] = restProps, $[46] = role, $[47] = t11, $[48] = t12, $[49] = t5, $[50] = t6, $[51] = transition, $[52] = visualDuration, $[53] = t13) : t13 = $[53], t13;
128
+ children: [t8, t9]
129
+ }), $[40] = cardTone, $[41] = radius, $[42] = restProps, $[43] = role, $[44] = t2, $[45] = t3, $[46] = t8, $[47] = t9, $[48] = transition, $[49] = visualDuration, $[50] = t10) : t10 = $[50], t10;
135
130
  }
136
131
  function LoadingBarProgress(props) {
137
132
  let $ = c(12), { duration, onComplete, tone, visualDuration } = props, { color } = useTheme_v2(), t0 = color.button.default[tone], t1;
@@ -178,7 +173,7 @@ const container = {
178
173
  zIndex: 0,
179
174
  scale: .75
180
175
  }
181
- }, content = {
176
+ }, containerInitial = ["hidden", "initial"], containerAnimate = ["visible", "slideIn"], containerExit = ["hidden", "slideOut"], content = {
182
177
  initial: { willChange: "transform" },
183
178
  hidden: { opacity: 0 },
184
179
  visible: { opacity: 1 }
package/dist/toast.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"toast.js","names":["radius = 3","visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}","['hidden', 'initial']","['visible', 'slideIn']","['hidden', 'slideOut']","clsx(toast, className)","title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )","description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )","<Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>","closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )","<MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>","hasDuration && (\n <motion.div className={loadingBar} variants={content} transition={transition}>\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )","motion.div","<MotionCard\n className={clsx(toast, className)}\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n as=\"li\"\n layout=\"position\"\n variants={container}\n initial={initial}\n animate={animate}\n exit={exit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <motion.div className={loadingBar} variants={content} transition={transition}>\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )}\n </MotionCard>","hasDuration ? '' : undefined","{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}","bg","color.button.default[tone]","{scaleX: 0}","{scaleX: 1}","{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}","duration / 1_000","<MotionCard\n className={loadingBarProgress}\n tone={tone}\n style={{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onComplete}\n />","() => true","() => false","padding = 4","gap = 3","{zIndex}","<Grid\n as=\"ul\"\n className={toastLayer}\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </Grid>","zOffset = 1","[]","{version: 0.0, push}","toast","useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])","mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )","({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n )","<ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>","ToastContext.Provider","{dismiss, id, params, updatedAt}","params","dismiss","id"],"sources":["../src/core/components/toast/styles.ts","../src/core/components/toast/toast.css.ts","../src/core/components/toast/toast.tsx","../src/core/hooks/useMounted.ts","../src/core/components/toast/toastContext.ts","../src/core/components/toast/toastLayer.css.ts","../src/core/components/toast/toastLayer.tsx","../src/core/components/toast/toastState.ts","../src/core/components/toast/toastProvider.tsx","../src/core/components/toast/useToast.ts"],"sourcesContent":["import {ThemeColorStateToneKey} from '../../../theme/system/color/_system'\nimport type {ButtonTone} from '../../types/button'\n\nexport const STATUS_CARD_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ThemeColorStateToneKey}\n\nexport const BUTTON_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ButtonTone}\n","import {style} from '@vanilla-extract/css'\n\nconst LOADING_BAR_HEIGHT = 2\n\nexport const toast = style({\n pointerEvents: 'all',\n width: '100%',\n position: 'relative',\n overflow: 'clip',\n selectors: {\n '&[data-has-duration]': {\n paddingBottom: `calc(${LOADING_BAR_HEIGHT}px / 2)`,\n },\n },\n})\n\nexport const toastText = style({\n overflowX: 'auto',\n})\n\nexport const loadingBar = style({\n display: 'flex',\n position: 'absolute',\n bottom: '0px',\n top: '0px',\n left: '0px',\n right: '0px',\n pointerEvents: 'none',\n zIndex: -1,\n overflow: 'clip',\n background: 'transparent',\n alignItems: 'flex-end',\n willChange: 'opacity',\n})\n\nexport const loadingBarMask = style({\n position: 'absolute',\n top: 0,\n left: `-${LOADING_BAR_HEIGHT}px`,\n right: `-${LOADING_BAR_HEIGHT}px`,\n bottom: `${LOADING_BAR_HEIGHT}px`,\n zIndex: 1,\n})\n\nexport const loadingBarProgress = style({\n display: 'block',\n height: '100%',\n width: '100%',\n transformOrigin: '0% 50%',\n selectors: {\n '&&': {\n backgroundColor: 'var(--toast-loading-bar-bg)',\n },\n },\n})\n","import {CloseIcon} from '@sanity/icons/Close'\nimport {clsx} from 'clsx/lite'\nimport {motion, stagger, type Variant, type Variants} from 'motion/react'\n\nimport {ThemeColorStateToneKey} from '../../../theme/system/color/_system'\nimport {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'\nimport {Box} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Card} from '../../primitives/card/card'\nimport {Flex} from '../../primitives/flex/flex'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {BUTTON_TONE, STATUS_CARD_TONE} from './styles'\n\nimport {loadingBar, loadingBarMask, loadingBarProgress, toast, toastText} from './toast.css'\n\n/**\n * @public\n */\nexport interface ToastProps {\n closable?: boolean\n description?: React.ReactNode\n onClose: () => void\n radius?: number | number[]\n title?: React.ReactNode\n status?: 'error' | 'warning' | 'success' | 'info'\n duration?: number\n updatedAt?: number\n}\n\nconst ROLES = {\n error: 'alert',\n warning: 'alert',\n success: 'alert',\n info: 'alert',\n} as const\n\n// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions\n// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value\nconst LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24\n\n/**\n * The `Toast` component gives feedback to users when an action has taken place.\n *\n * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.\n *\n * @public\n */\nexport function Toast(\n props: ToastProps &\n Omit<\n React.HTMLProps<HTMLDivElement>,\n | 'as'\n | 'height'\n | 'ref'\n | 'title'\n | 'onAnimationStart'\n | 'onDragStart'\n | 'onDragEnd'\n | 'onDrag'\n >,\n): React.JSX.Element {\n const {\n className,\n closable,\n description,\n duration,\n onClose,\n radius = 3,\n title,\n status,\n updatedAt,\n ...restProps\n } = props\n const cardTone = status ? STATUS_CARD_TONE[status] : 'default'\n const buttonTone = status ? BUTTON_TONE[status] : 'default'\n const role = status ? ROLES[status] : 'status'\n\n const prefersReducedMotion = usePrefersReducedMotion()\n\n const visualDuration: number = prefersReducedMotion ? 0 : 0.26\n const transition = visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}\n\n const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG\n const initial: ContainerVariants[] = ['hidden', 'initial']\n const animate: ContainerVariants[] = ['visible', 'slideIn']\n const exit: ContainerVariants[] = ['hidden', 'slideOut']\n\n return (\n <MotionCard\n className={clsx(toast, className)}\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n as=\"li\"\n layout=\"position\"\n variants={container}\n initial={initial}\n animate={animate}\n exit={exit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <motion.div className={loadingBar} variants={content} transition={transition}>\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )}\n </MotionCard>\n )\n}\n\ninterface LoadingBarProgressProps {\n duration: number\n onComplete: () => void\n tone: ThemeColorStateToneKey\n visualDuration: number\n}\n\nfunction LoadingBarProgress(props: LoadingBarProgressProps) {\n const {duration, onComplete, tone, visualDuration} = props\n const {color} = useTheme_v2()\n\n return (\n <MotionCard\n className={loadingBarProgress}\n tone={tone}\n style={{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onComplete}\n />\n )\n}\n\nconst container = {\n initial: {y: 32, scale: 0.5, zIndex: 1},\n hidden: {opacity: 0},\n visible: (visualDuration: number) => {\n if (!visualDuration) return {opacity: 1}\n\n return {\n opacity: 1,\n transition: {\n when: 'beforeChildren',\n delayChildren: stagger(visualDuration / 3),\n duration: visualDuration / 3,\n },\n }\n },\n slideIn: {\n y: 0,\n scale: 1,\n },\n slideOut: {\n zIndex: 0,\n scale: 0.75,\n },\n} satisfies Variants\ntype ContainerVariants = keyof typeof container\n\nconst content = {\n initial: {\n willChange: 'transform',\n },\n hidden: {\n opacity: 0,\n },\n visible: {\n opacity: 1,\n },\n} satisfies Partial<Record<ContainerVariants, Variant>>\n\nconst MotionCard = motion.create(Card)\nconst MotionFlex = motion.create(Flex)\nconst MotionText = motion.create(Text)\n","import {useSyncExternalStore} from 'react'\n\n/**\n * Some components should only render after mounting to the DOM, and not be rendered at all during SSR renderToString or equivalent.\n * @public\n */\nexport function useMounted(): boolean {\n return useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nconst subscribe = () => () => {}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {ToastContextValue} from './types'\n\nexport const ToastContext = createGlobalScopedContext<ToastContextValue | null>(\n '@sanity/ui/context/toast',\n null,\n)\n","import {style} from '@vanilla-extract/css'\n\nexport const toastLayer = style({\n boxSizing: 'border-box',\n position: 'fixed',\n right: 0,\n bottom: 0,\n listStyle: 'none',\n pointerEvents: 'none',\n maxWidth: '420px',\n width: '100%',\n})\n","import {Grid} from '../../primitives/grid/grid'\nimport {useLayer} from '../../utils/layer/useLayer'\n\nimport {toastLayer} from './toastLayer.css'\n\n/**\n * @public\n */\nexport interface ToastLayerProps {\n children: React.ReactNode\n padding?: number | number[]\n paddingX?: number | number[]\n paddingY?: number | number[]\n gap?: number | number[]\n}\n\n/**\n * @internal\n */\nexport function ToastLayer(props: ToastLayerProps): React.JSX.Element {\n const {children, padding = 4, paddingX, paddingY, gap = 3} = props\n const {zIndex} = useLayer()\n\n return (\n <Grid\n as=\"ul\"\n className={toastLayer}\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </Grid>\n )\n}\n","let toastId = 0\n\n/** @internal */\nexport function generateToastId(): string {\n return String(toastId++)\n}\n","import {AnimatePresence} from 'motion/react'\nimport {startTransition, useMemo, useState} from 'react'\n\nimport {useMounted} from '../../hooks/useMounted'\nimport {LayerProvider} from '../../utils/layer/layerProvider'\nimport {Toast} from './toast'\nimport {ToastContext} from './toastContext'\nimport {ToastLayer, type ToastLayerProps} from './toastLayer'\nimport {generateToastId} from './toastState'\nimport {ToastContextValue, ToastParams} from './types'\n\ntype ToastState = {\n dismiss: () => void\n id: string\n updatedAt: number\n params: ToastParams\n}[]\n\n/**\n * @public\n */\nexport interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {\n children?: React.ReactNode\n zOffset?: number | number[]\n}\n\n/**\n * @public\n */\nexport function ToastProvider(props: ToastProviderProps): React.JSX.Element {\n const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props\n const [state, setState] = useState<ToastState>([])\n const mounted = useMounted()\n\n const value: ToastContextValue = useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])\n\n return (\n <ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>\n )\n}\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {ToastContext} from './toastContext'\nimport {ToastContextValue} from './types'\n\n/**\n * @public\n */\nexport function useToast(): ToastContextValue {\n const value = useContext(ToastContext)\n\n if (!value) {\n throw new Error('useToast(): missing context value')\n }\n\n // NOTE: This check is for future-compatiblity\n // - If the value is not an object, it’s not compatible with the current version\n // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n if (!isRecord(value) || value.version !== 0.0) {\n throw new Error('useToast(): the context value is not compatible')\n }\n\n return value\n}\n"],"mappings":";;;;;;;;;;;;AAGA,MAAa,mBAAmB;CAC9B,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;AACR,GAEa,cAAc;CACzB,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;AACR;;AEgBA,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;AACR;;;;;;;;AAaA,SAAgB,MACd,OAYmB;gBAEjB,WACA,UACA,aACA,UACA,SAKG,WAFH,QAFAA,IACA,OAEA;CAEE,AAAA,EAAA,OAAA,iLAXE,CACJ,WACA,UACA,aACA,UACA,SACA,QAAA,IACA,OACA,QACA,WACA,GAAA,aACE;CALF,IAAA,SAAA,OAAA,KAAA,IAAS,IAATA,IAMI,WAAW,SAAS,iBAAiB,UAAU,WAC/C,aAAa,SAAS,YAAY,UAAU,WAC5C,OAAO,SAAS,MAAM,UAAU,UAIhC,iBAFuB,wBAEE,IAAuB,IAAI,KACvCC;0CACf,KAAA,iBAAA;EAAC,MAAM;EAAmB;EAAgB,QAAQ;CAAI,IACtD,EAAC,UAAU,EAAC,GAFG,EAAA,MAAA;CAAnB,IAAM,aAAaA,IAIb,cAAc,YAAY,SAAS,QAAQ,KAAK,WAAW,SAC5BC;sDAAC,KAAA,CAAA,UAAU,SAAS;CAAzD,IAAM,UAA+BA,IACAC;sDAAC,KAAA,CAAA,WAAW,SAAS;CAA1D,IAAM,UAA+BA,IACHC;sDAAC,KAAA,CAAA,UAAU,UAAU;CAAvD,IAAM,OAA4BA,IAInBC;CAAY,AAAA,EAAA,QAAA,0BAAZ,KAAA,KAAK,OAAO,SAAS,GAAT,EAAA,MAAA;CAIJ,IAAA,KAAA,cAAc,KAAK,KAAA,GAgB/BC;iCACC,KAAA,SAAA,oBAAC,MAAD;EAAM,MAAM;EAAG,QAAO;EACnB,UAAA;CACG,CAAA,GAHP,EAAA,MAAA;CAKAC,IAAAA;CAC2D,AAAA,EAAA,QAAA,eAAA,EAAA,QAAA,cAD3D,KAAA,eACC,oBAAC,YAAD;EAAY,OAAA;EAAM,MAAM;EAAG,UAAU;EAAqB;EACvD,UAAA;CACS,CAAA,GAHb,EAAA,MAAA,aAC2D,EAAA,MAAA;CARhEC,IAAAA;CAEKF,AAAAA,EAAAA,QAAAA,MAAAA,EAAAA,QAKAC,MAPL,KAAA,oBAAC,MAAD;EAAM,WAAW;EAAW,MAAM;EAAG,SAAS;EAC5C,UAAA,qBAAC,OAAD;GAAO,KAAK;GAAZ,UAAA,CACGD,IAKAC,EAKI;;CACH,CAAA,GAXDD,EAAAA,MAAAA,IAKAC,EAAAA,MAAAA;CAQJE,IAAAA;CAOW,AAAA,EAAA,QAAA,cAAA,EAAA,QAPX,YAAA,EAAA,QAQc,WARd,MAAA,YACC,oBAAC,KAAD;EAAK,SAAS;EACZ,UAAA,oBAAC,QAAD;GACE,IAAG;GACH,MAAM;GACN,MAAK;GACL,SAAS;GACT,MAAM;GACN,SAAS;GACT,OAAO,EAAC,eAAe,MAAK;EAC7B,CAAA;CACE,CAAA,GAJK,EAAA,MAAA,YAPX,EAAA,MAAA,UAQc,EAAA,MAAA;CAxBjBC,IAAAA;CAgBGD,AAAAA,EAAAA,QAAAA,OAAAA,EAAAA,QAfDD,MAAAA,EAAAA,QAD4D,cAA9D,MAAA,qBAAC,YAAD;EAAY,OAAM;EAAa,UAAU;EAAqB;EAA9D,UAAA,CACEA,IAeCC,GAaS;KAbTA,EAAAA,MAAAA,KAfDD,EAAAA,MAAAA,IAD4D,EAAA,MAAA;CA8B7DG,IAAAA;CAE0C,AAAA,EAAA,QAAA,YAAA,EAAA,QAG3B,YAAA,EAAA,QALf,eAAA,EAAA,QAMiB,WAAA,EAAA,QAJ2C,UAAA,EAAA,QADO,cAAA,EAAA,QAG7C,aAAA,EAAA,QAID,kBARrB,MAAA,eACC,qBAACC,OAAAA,KAAD;EAAY,WAAA;EAAuB,UAAU;EAAqB;EAAlE,UAAA,CACE,oBAAC,MAAD;GAAM,WAAA;GAA2B,MAAM;GAAkB;EAAS,CAAA,GAClE,oBAAC,oBAAD;GAEY;GACV,YAAY;GACZ,MAAM;GACU;EACjB,GALM,YAAY,WAKlB,CACS;KAR6B,EAAA,MAAA,UAG3B,EAAA,MAAA,UALf,EAAA,MAAA,aAMiB,EAAA,MAAA,SAJ2C,EAAA,MAAA,QADO,EAAA,MAAA,YAG7C,EAAA,MAAA,WAID,EAAA,MAAA;CAxDxBC,IAAAA;CADF,OAUU,EAAA,QAAA,YAAA,EAAA,QAFE,UAAA,EAAA,QAHJ,aAAA,EAAA,QADE,QAAA,EAAA,QAeNH,OAAAA,EAAAA,QA8BCC,OAAAA,EAAAA,QA/CUN,MAAAA,EAAAA,QAIQS,MAAAA,EAAAA,QAWP,cAAA,EAAA,QAVJ,kBANV,MAAA,qBAAC,YAAD;EACE,WAAWT;EACX,WAAQ;EACF;EACN,GAAI;EACJ,qBAAmBS;EACnB,QAAQ;EACA;EACR,QAAQ;EACR,MAAM;EACN,IAAG;EACH,QAAO;EACP,UAAU;EACD;EACA;EACH;EACM;EAhBd,UAAA,CAkBEJ,KA8BCC,GAYS;KAnDJ,EAAA,MAAA,UAFE,EAAA,MAAA,QAHJ,EAAA,MAAA,WADE,EAAA,MAAA,MAeND,EAAAA,MAAAA,KA8BCC,EAAAA,MAAAA,KA/CUN,EAAAA,MAAAA,IAIQS,EAAAA,MAAAA,IAWP,EAAA,MAAA,YAVJ,EAAA,MAAA,4CANVD;AA8DJ;AASA,SAAS,mBAAmB,OAAgC;gBACpD,EAAC,UAAU,YAAY,MAAM,mBAAkB,OAC/C,EAAC,UAAS,YAAY,GAMU,KAAA,MAAM,OAAO,QAAQ,OAAhDE;CAA8DC,AAAAA,EAAAA,OAAAA,GAAR,QAAQ,kBAA9D,KAAA,EAAC,0BAA0BC,GAA2B,QAAQ,GAAE,GAAFD,EAAAA,KAAAA,GAAR,QAAQ;CAC5DE,IAAAA,IACAC;qDADA,KAAA,EAAC,QAAQ,EAAC,GACV,KAAA,EAAC,QAAQ,EAAC;CAC2B,IAAA,KAAA,WAAW,KAA7CC;CAAkCC,AAAAA,EAAAA,OAAAA,MAAAA,EAAAA,OAA1B,kBAAR,KAAA;EAAC,OAAO;EAAgB,UAAUA;EAAkB,MAAM;CAAQ,GAAhCA,EAAAA,KAAAA,IAA1B,EAAA,KAAA;CANtBC,IAAAA;CADF,OAQyB,EAAA,OAAA,cAAA,EAAA,OAJdP,MAAAA,EAAAA,OAGKK,MAAAA,EAAAA,QAJN,QAFR,KAAA,oBAAC,YAAD;EACE,WAAW;EACL;EACN,OAAOL;EACP,SAASG;EACT,SAASC;EACT,YAAYC;EACZ,qBAAqB;CACtB,CAAA,GADsB,EAAA,KAAA,YAJdL,EAAAA,KAAAA,IAGKK,EAAAA,KAAAA,IAJN,EAAA,MAAA,gCAFRE;AAUJ;AAEA,MAAM,YAAY;CAChB,SAAS;EAAC,GAAG;EAAI,OAAO;EAAK,QAAQ;CAAC;CACtC,QAAQ,EAAC,SAAS,EAAC;CACnB,UAAU,mBACH,iBAEE;EACL,SAAS;EACT,YAAY;GACV,MAAM;GACN,eAAe,QAAQ,iBAAiB,CAAC;GACzC,UAAU,iBAAiB;EAC7B;CACF,IAT4B,EAAC,SAAS,EAAC;CAWzC,SAAS;EACP,GAAG;EACH,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF,GAGM,UAAU;CACd,SAAS,EACP,YAAY,YACd;CACA,QAAQ,EACN,SAAS,EACX;CACA,SAAS,EACP,SAAS,EACX;AACF,GAEM,aAAa,OAAO,OAAO,IAAI,GAC/B,aAAa,OAAO,OAAO,IAAI,GAC/B,aAAa,OAAO,OAAO,IAAI;;;;;ACtNrC,SAAgB,aAAsB;CACpC,OAAO,qBACL,WACAC,SACAC,MACF;AACF;AAFI,SAAA,SAAA;CAAM,OAAA;;AADN,SAAA,UAAA;CAAM,OAAA;;AAKV,MAAM,wBAAwB,CAAC,GCXlB,eAAe,0BAC1B,4BACA,IACF;;;;;AEaA,SAAgB,WAAW,OAA2C;eAC9D,EAAC,UAAU,SAAA,IAAa,UAAU,UAAU,KAAA,OAAW,OAA5C,UAAA,OAAA,KAAA,IAAU,IAAVC,IAAiC,MAAA,OAAA,KAAA,IAAM,IAANC,IAC5C,EAAC,WAAU,SAAS,GAYfC;CAAC,AAAA,EAAA,OAAA,sBAAD,KAAA,EAAC,OAAM,GAAN,EAAA,KAAA;CATVC,IAAAA;CADF,OAYK,EAAA,OAAA,YAAA,EAAA,OAJI,OAAA,EAAA,OAHI,WAAA,EAAA,OACC,YAAA,EAAA,OACA,YAAA,EAAA,OAGHD,MATT,KAAA,oBAAC,MAAD;EACE,IAAG;EACH,WAAW;EACX,WAAQ;EACC;EACC;EACA;EACL;EACL,qBAAqB;EACrB,OAAOA;EAEN;CACG,CAAA,GADH,EAAA,KAAA,UAJI,EAAA,KAAA,KAHI,EAAA,KAAA,SACC,EAAA,KAAA,UACA,EAAA,KAAA,UAGHA,EAAAA,KAAAA,4BATTC;AAcJ;ACtCA,IAAI,UAAU;;AAGd,SAAgB,kBAA0B;CACxC,OAAO,OAAO,SAAS;AACzB;;;;ACwBA,SAAgB,cAAc,OAA8C;gBACpE,EAAC,UAAU,SAAS,UAAU,UAAU,KAAK,SAAA,OAAe,OAAf,UAAA,OAAA,KAAA,IAAU,IAAVC,IACJC;qDAAC,KAAA,CAAA;CAAhD,IAAM,CAAC,OAAO,YAAY,SAAqBA,EAAE,GAC3C,UAAU,WAAW,GAkDlBC;;EA/CP,IAAM,QAAQ,WAAwB;GACpC,IAAM,KAAK,OAAO,MAAM,gBAAgB,GAClC,WAAW,OAAO,YAAY;GA0CpC,OAxCA,sBAAsB;IACpB,UAAU,cAA0B;KAOlC,IAAI,aAAa,KACf,OAAO,UAAU,QAAQ,UAAU,MAAM,OAAO,EAAE;KAQpD,IAAM,gBACJ,sBACE,UAAU,iBAAiB,aAAa,QAAQ,YAAUC,QAAM,OAAO,EAAE,CAAC,CAC5E;KAQF,OAAO,CACL,GAAG,UAAU,QAAQ,YAAUA,QAAM,OAAO,EAAE,GAC9C;MACE;MACA;MACA,WAAW,KAAK,IAAI;MACpB,QAAQ;OAAC,GAAG;OAAQ;MAAQ;KAC9B,CACF;IACF,CAAC;GACH,CAAC,GAEM;EACT;EAEO,KAAA;GAAC,SAAS;GAAK;EAAI;;CAhD5B,IAAM,QAA2BC,IAsD5BC;CAE8E,AAAA,EAAA,OAAA,OAAA,EAAA,OAF9E,WAAA,EAAA,OAEwB,WAAA,EAAA,OAAmB,YAAA,EAAA,OAAoB,YAAA,EAAA,OAEvD,SAAA,EAAA,OAHiB,WADzB,KAAA,WACC,oBAAC,eAAD;EAAwB;EACtB,UAAA,oBAAC,YAAD;GAAqB;GAAmB;GAAoB;GAAe;GACzE,UAAA,oBAAC,iBAAD;IAAiB,SAAS;IAAO,MAAK;IACnC,UAAA,MAAM,IAAIC,KAWV;GACc,CAAA;EACP,CAAA;CACC,CAAA,GAhB8D,EAAA,KAAA,KAF9E,EAAA,KAAA,SAEwB,EAAA,KAAA,SAAmB,EAAA,KAAA,UAAoB,EAAA,KAAA,UAEvD,EAAA,KAAA,OAHiB,EAAA,KAAA;CAH5BC,IAAAA;CADF,OAEK,EAAA,QAAA,YAAA,EAAA,QACAF,MAFH,KAAA,qBAACG,aAAAA,UAAD;EAA8B;EAA9B,UAAA,CACG,UACAH,EAoBoB;KArBpB,EAAA,MAAA,UACAA,EAAAA,MAAAA,8BAFHE;AAwBJ;AAlByB,SAAA,MAAA,IAAC;CAAC,IAAA,EAAA,SAAA,WAAS,IAAA,MAAI,QAAA,UAAQ,cAAtBE;CACV,OAAA,oBAAC,OAAD;EAEE,UAAUC,SAAO;EACjB,aAAaA,SAAO;EACpB,SAASC;EACT,QAAQD,SAAO;EACf,OAAOA,SAAO;EACd,UAAUA,SAAO;EACN;CACZ,GARME,IAQN;AAVwC;;;;ACnFzD,SAAgB,WAA8B;CAC5C,IAAM,QAAQ,WAAW,YAAY;CAErC,IAAI,CAAC,OACH,MAAU,MAAM,mCAAmC;CAMrD,IAAI,CAAC,SAAS,KAAK,KAAK,MAAM,YAAY,GACxC,MAAU,MAAM,iDAAiD;CAGnE,OAAO;AACT"}
1
+ {"version":3,"file":"toast.js","names":["radius = 3","visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}","clsx(toast, className)","title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )","description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )","<Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>","closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )","<MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>","hasDuration && (\n <motion.div\n className={loadingBar}\n data-ui=\"ToastLoadingBar\"\n variants={content}\n transition={transition}\n >\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )","motion.div","<MotionCard\n className={clsx(toast, className)}\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n as=\"li\"\n layout=\"position\"\n variants={container}\n initial={containerInitial}\n animate={containerAnimate}\n exit={containerExit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <motion.div\n className={loadingBar}\n data-ui=\"ToastLoadingBar\"\n variants={content}\n transition={transition}\n >\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )}\n </MotionCard>","hasDuration ? '' : undefined","{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}","bg","color.button.default[tone]","{scaleX: 0}","{scaleX: 1}","{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}","duration / 1_000","<MotionCard\n className={loadingBarProgress}\n tone={tone}\n style={{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onComplete}\n />","() => true","() => false","padding = 4","gap = 3","{zIndex}","<Grid\n as=\"ul\"\n className={toastLayer}\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </Grid>","zOffset = 1","[]","{version: 0.0, push}","toast","useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])","mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )","({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n )","<ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>","ToastContext.Provider","{dismiss, id, params, updatedAt}","params","dismiss","id"],"sources":["../src/core/components/toast/styles.ts","../src/core/components/toast/toast.css.ts","../src/core/components/toast/toast.tsx","../src/core/hooks/useMounted.ts","../src/core/components/toast/toastContext.ts","../src/core/components/toast/toastLayer.css.ts","../src/core/components/toast/toastLayer.tsx","../src/core/components/toast/toastState.ts","../src/core/components/toast/toastProvider.tsx","../src/core/components/toast/useToast.ts"],"sourcesContent":["import {ThemeColorStateToneKey} from '../../../theme/system/color/_system'\nimport type {ButtonTone} from '../../types/button'\n\nexport const STATUS_CARD_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ThemeColorStateToneKey}\n\nexport const BUTTON_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ButtonTone}\n","import {style} from '@vanilla-extract/css'\n\nconst LOADING_BAR_HEIGHT = 2\n\nexport const toast = style({\n pointerEvents: 'all',\n width: '100%',\n position: 'relative',\n overflow: ['hidden', 'clip'],\n selectors: {\n '&[data-has-duration]': {\n paddingBottom: `calc(${LOADING_BAR_HEIGHT}px / 2)`,\n },\n },\n})\n\nexport const toastText = style({\n overflowX: 'auto',\n})\n\nexport const loadingBar = style({\n display: 'flex',\n position: 'absolute',\n bottom: '0px',\n top: '0px',\n left: '0px',\n right: '0px',\n pointerEvents: 'none',\n zIndex: -1,\n overflow: ['hidden', 'clip'],\n background: 'transparent',\n alignItems: 'flex-end',\n willChange: 'opacity',\n})\n\nexport const loadingBarMask = style({\n position: 'absolute',\n top: 0,\n left: `-${LOADING_BAR_HEIGHT}px`,\n right: `-${LOADING_BAR_HEIGHT}px`,\n bottom: `${LOADING_BAR_HEIGHT}px`,\n zIndex: 1,\n})\n\nexport const loadingBarProgress = style({\n display: 'block',\n height: '100%',\n width: '100%',\n transformOrigin: '0% 50%',\n selectors: {\n '&&': {\n backgroundColor: 'var(--toast-loading-bar-bg)',\n },\n },\n})\n","import {CloseIcon} from '@sanity/icons/Close'\nimport {clsx} from 'clsx/lite'\nimport {motion, stagger, type Variant, type Variants} from 'motion/react'\n\nimport {ThemeColorStateToneKey} from '../../../theme/system/color/_system'\nimport {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'\nimport {Box} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Card} from '../../primitives/card/card'\nimport {Flex} from '../../primitives/flex/flex'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {BUTTON_TONE, STATUS_CARD_TONE} from './styles'\n\nimport {loadingBar, loadingBarMask, loadingBarProgress, toast, toastText} from './toast.css'\n\n/**\n * @public\n */\nexport interface ToastProps {\n closable?: boolean\n description?: React.ReactNode\n onClose: () => void\n radius?: number | number[]\n title?: React.ReactNode\n status?: 'error' | 'warning' | 'success' | 'info'\n duration?: number\n updatedAt?: number\n}\n\nconst ROLES = {\n error: 'alert',\n warning: 'alert',\n success: 'alert',\n info: 'alert',\n} as const\n\n// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions\n// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value\nconst LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24\n\n/**\n * The `Toast` component gives feedback to users when an action has taken place.\n *\n * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.\n *\n * @public\n */\nexport function Toast(\n props: ToastProps &\n Omit<\n React.HTMLProps<HTMLDivElement>,\n | 'as'\n | 'height'\n | 'ref'\n | 'title'\n | 'onAnimationStart'\n | 'onDragStart'\n | 'onDragEnd'\n | 'onDrag'\n >,\n): React.JSX.Element {\n const {\n className,\n closable,\n description,\n duration,\n onClose,\n radius = 3,\n title,\n status,\n updatedAt,\n ...restProps\n } = props\n const cardTone = status ? STATUS_CARD_TONE[status] : 'default'\n const buttonTone = status ? BUTTON_TONE[status] : 'default'\n const role = status ? ROLES[status] : 'status'\n\n const prefersReducedMotion = usePrefersReducedMotion()\n\n const visualDuration: number = prefersReducedMotion ? 0 : 0.26\n const transition = visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}\n\n const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG\n\n return (\n <MotionCard\n className={clsx(toast, className)}\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n as=\"li\"\n layout=\"position\"\n variants={container}\n initial={containerInitial}\n animate={containerAnimate}\n exit={containerExit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <motion.div\n className={loadingBar}\n data-ui=\"ToastLoadingBar\"\n variants={content}\n transition={transition}\n >\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )}\n </MotionCard>\n )\n}\n\ninterface LoadingBarProgressProps {\n duration: number\n onComplete: () => void\n tone: ThemeColorStateToneKey\n visualDuration: number\n}\n\nfunction LoadingBarProgress(props: LoadingBarProgressProps) {\n const {duration, onComplete, tone, visualDuration} = props\n const {color} = useTheme_v2()\n\n return (\n <MotionCard\n className={loadingBarProgress}\n tone={tone}\n style={{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onComplete}\n />\n )\n}\n\nconst container = {\n initial: {y: 32, scale: 0.5, zIndex: 1},\n hidden: {opacity: 0},\n visible: (visualDuration: number) => {\n if (!visualDuration) return {opacity: 1}\n\n return {\n opacity: 1,\n transition: {\n when: 'beforeChildren',\n delayChildren: stagger(visualDuration / 3),\n duration: visualDuration / 3,\n },\n }\n },\n slideIn: {\n y: 0,\n scale: 1,\n },\n slideOut: {\n zIndex: 0,\n scale: 0.75,\n },\n} satisfies Variants\ntype ContainerVariants = keyof typeof container\n\nconst containerInitial: ContainerVariants[] = ['hidden', 'initial']\nconst containerAnimate: ContainerVariants[] = ['visible', 'slideIn']\nconst containerExit: ContainerVariants[] = ['hidden', 'slideOut']\n\nconst content = {\n initial: {\n willChange: 'transform',\n },\n hidden: {\n opacity: 0,\n },\n visible: {\n opacity: 1,\n },\n} satisfies Partial<Record<ContainerVariants, Variant>>\n\nconst MotionCard = motion.create(Card)\nconst MotionFlex = motion.create(Flex)\nconst MotionText = motion.create(Text)\n","import {useSyncExternalStore} from 'react'\n\n/**\n * Some components should only render after mounting to the DOM, and not be rendered at all during SSR renderToString or equivalent.\n * @public\n */\nexport function useMounted(): boolean {\n return useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nconst subscribe = () => () => {}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {ToastContextValue} from './types'\n\nexport const ToastContext = createGlobalScopedContext<ToastContextValue | null>(\n '@sanity/ui/context/toast',\n null,\n)\n","import {style} from '@vanilla-extract/css'\n\nexport const toastLayer = style({\n boxSizing: 'border-box',\n position: 'fixed',\n right: 0,\n bottom: 0,\n listStyle: 'none',\n pointerEvents: 'none',\n maxWidth: '420px',\n width: '100%',\n})\n","import {Grid} from '../../primitives/grid/grid'\nimport {useLayer} from '../../utils/layer/useLayer'\n\nimport {toastLayer} from './toastLayer.css'\n\n/**\n * @public\n */\nexport interface ToastLayerProps {\n children: React.ReactNode\n padding?: number | number[]\n paddingX?: number | number[]\n paddingY?: number | number[]\n gap?: number | number[]\n}\n\n/**\n * @internal\n */\nexport function ToastLayer(props: ToastLayerProps): React.JSX.Element {\n const {children, padding = 4, paddingX, paddingY, gap = 3} = props\n const {zIndex} = useLayer()\n\n return (\n <Grid\n as=\"ul\"\n className={toastLayer}\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </Grid>\n )\n}\n","let toastId = 0\n\n/** @internal */\nexport function generateToastId(): string {\n return String(toastId++)\n}\n","import {AnimatePresence} from 'motion/react'\nimport {startTransition, useMemo, useState} from 'react'\n\nimport {useMounted} from '../../hooks/useMounted'\nimport {LayerProvider} from '../../utils/layer/layerProvider'\nimport {Toast} from './toast'\nimport {ToastContext} from './toastContext'\nimport {ToastLayer, type ToastLayerProps} from './toastLayer'\nimport {generateToastId} from './toastState'\nimport {ToastContextValue, ToastParams} from './types'\n\ntype ToastState = {\n dismiss: () => void\n id: string\n updatedAt: number\n params: ToastParams\n}[]\n\n/**\n * @public\n */\nexport interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {\n children?: React.ReactNode\n zOffset?: number | number[]\n}\n\n/**\n * @public\n */\nexport function ToastProvider(props: ToastProviderProps): React.JSX.Element {\n const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props\n const [state, setState] = useState<ToastState>([])\n const mounted = useMounted()\n\n const value: ToastContextValue = useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])\n\n return (\n <ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>\n )\n}\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {ToastContext} from './toastContext'\nimport {ToastContextValue} from './types'\n\n/**\n * @public\n */\nexport function useToast(): ToastContextValue {\n const value = useContext(ToastContext)\n\n if (!value) {\n throw new Error('useToast(): missing context value')\n }\n\n // NOTE: This check is for future-compatiblity\n // - If the value is not an object, it’s not compatible with the current version\n // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n if (!isRecord(value) || value.version !== 0.0) {\n throw new Error('useToast(): the context value is not compatible')\n }\n\n return value\n}\n"],"mappings":"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"}