@sanity/ui 4.4.4 → 4.5.0-panda.0

package/dist/{textInput-CTqkq5UQ.js → textInput-ByCyqiAh.js}

@@ -2,8 +2,8 @@ import { c as EMPTY_RECORD, i as _responsive, n as _getArrayProp, o as rem } fro
 import { a as isHTMLElement, c as isHTMLTextAreaElement, i as isHTMLButtonElement, o as isHTMLInputElement, r as isHTMLAnchorElement, s as isHTMLSelectElement } from "./element-BYgCE_iK.js";
 import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
 import { l as useRootTheme, m as focusRingStyle, p as focusRingBorderStyle, s as Card, v as responsiveRadiusStyle, y as Box } from "./useLayer-D_TnC6On.js";
-import { n as Text } from "./stack-CPdFknrG.js";
-import { t as Button } from "./button-Bp0udHV9.js";
+import { n as Text } from "./stack-TOlBMvbq.js";
+import { t as Button } from "./button-DLiQy0Qz.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx/lite";
 import { isValidElement, useEffect, useImperativeHandle, useRef } from "react";
@@ -155,8 +155,7 @@ function textInputRepresentationColorStyle(props) {
 		width: input.border.width
 	})};}}}`;
 }
-var inputRoot = "_1lyk8y2", textAreaRoot = "_1lyk8y1 _1lyk8y0", textInputRoot = "_1lyk8y0";
-const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Prefix = styled(Card).attrs({ forwardedAs: "span" }).withConfig({
+const textAreaRoot = "fAtomh djbxbl", inputRoot = "krAvjf kdFIjO iDEBOB emPzDJ", CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Prefix = styled(Card).attrs({ forwardedAs: "span" }).withConfig({
 	displayName: "Prefix",
 	componentId: "sc-j9wa1r-0"
 })`border-top-right-radius:0;border-bottom-right-radius:0;& > span{display:block;margin:-1px;}`, Suffix = styled(Card).attrs({ forwardedAs: "span" }).withConfig({
@@ -215,7 +214,7 @@ function TextInput(props) {
 	}), $[31] = prefix, $[32] = radius, $[33] = t13) : t13 = $[33];
 	let prefixNode = t13, t14 = border ? "" : void 0, t15;
 	$[34] !== IconComponent || $[35] !== fontSize || $[36] !== padding ? (t15 = IconComponent && /* @__PURE__ */ jsx(Box, {
-		className: "_8fnjkq0",
+		className: "kiKDyH lhPceK qbeer",
 		padding,
 		children: /* @__PURE__ */ jsxs(Text, {
 			size: fontSize,
@@ -224,7 +223,7 @@ function TextInput(props) {
 	}), $[34] = IconComponent, $[35] = fontSize, $[36] = padding, $[37] = t15) : t15 = $[37];
 	let t16;
 	$[38] !== $hasClearButton || $[39] !== IconRightComponent || $[40] !== fontSize || $[41] !== padding ? (t16 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(Box, {
-		className: "_8fnjkq1",
+		className: "lhPceK hWgptE qbeer",
 		padding,
 		children: /* @__PURE__ */ jsxs(Text, {
 			size: fontSize,
@@ -264,7 +263,7 @@ function TextInput(props) {
 			padding: clearButtonPadding,
 			radius,
 			...clearButtonProps,
-			className: clsx("_8fnjkq2", clearButtonProps.className),
+			className: clsx("gIVJpv", clearButtonProps.className),
 			onClick: handleClearClick,
 			onMouseDown: handleClearMouseDown
 		})
@@ -311,7 +310,7 @@ function TextInput(props) {
 	let t25;
 	return $[88] !== prefixNode || $[89] !== rootTheme.tone || $[90] !== suffixNode || $[91] !== t24 ? (t25 = /* @__PURE__ */ jsxs(Card, {
 		as: "span",
-		className: textInputRoot,
+		className: "fAtomh",
 		"data-ui": "TextInput",
 		display: "flex",
 		tone: rootTheme.tone,
@@ -333,4 +332,4 @@ function _temp(event) {
 }
 export { isFocusable as _, textInputColorStyle as a, textInputRepresentationColorStyle as c, responsiveInputPaddingStyle as d, useCustomValidity as f, focusLastDescendant as g, focusFirstDescendant as h, textInputBaseStyle as i, textInputRepresentationStyle as l, attemptFocus as m, inputRoot as n, textInputFontSizeStyle as o, _hasFocus as p, textAreaRoot as r, textInputFontStyle as s, TextInput as t, responsiveInputPaddingIconRightStyle as u, _raf as v, _raf2 as y };
 
-//# sourceMappingURL=textInput-CTqkq5UQ.js.map
+//# sourceMappingURL=textInput-ByCyqiAh.js.map

package/dist/{textInput-CTqkq5UQ.js.map → textInput-ByCyqiAh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"textInput-CTqkq5UQ.js","names":["() => {\n    ref.current?.setCustomValidity(customValidity || '')\n  }","[customValidity, ref]","ref.current?.setCustomValidity","_c","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        data-ui=\"TextInput__presentation\"\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        data-ui=\"TextInput__presentation\"\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          data-ui=\"TextInput__input\"\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          data-ui=\"TextInput__input\"\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          data-ui=\"TextInput__input\"\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","_c"],"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 const textInputBaseStyle = 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  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\nexport function textInputColorStyle(\n  props: Pick<TextInputInputStyleProps, '$scheme' | '$tone'> & ThemeProps,\n): ReturnType<typeof css> {\n  const {$scheme, $tone} = props\n  const {color} = getTheme_v2(props.theme)\n\n  return css`\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 textInputFontStyle(\n  props: Pick<TextInputInputStyleProps, '$weight'> & ThemeProps,\n): CSSObject {\n  const {$weight} = props\n  const {font} = getTheme_v2(props.theme)\n\n  return {\n    fontFamily: font.text.family,\n    fontWeight: `${($weight && font.text.weights[$weight]) || font.text.weights.regular}`,\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: Pick<TextInputRepresentationStyleProps, '$hasPrefix' | '$hasSuffix'>,\n): ReturnType<typeof css> {\n  const {$hasPrefix, $hasSuffix} = props\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}\n\nexport function textInputRepresentationColorStyle(\n  props: Omit<TextInputRepresentationStyleProps, '$hasPrefix' | '$hasSuffix'> & ThemeProps,\n): ReturnType<typeof css> {\n  const {$scheme, $tone, $unstableDisableFocusRing} = props\n  const {color, input} = getTheme_v2(props.theme)\n\n  return css`\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  textInputColorStyle,\n  textInputFontSizeStyle,\n  textInputFontStyle,\n  TextInputInputStyleProps,\n  textInputRepresentationColorStyle,\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 InputBase = styled.input`\n  ${textInputBaseStyle}\n`\n\nconst InputColor = styled(InputBase)<TextInputInputStyleProps>(textInputColorStyle)\n\nconst Input = styled(InputColor)<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(\n  responsiveInputPaddingStyle,\n  textInputFontStyle,\n  textInputFontSizeStyle,\n)\n\nconst PresentationColor = styled.span<TextInputRepresentationStyleProps>(\n  textInputRepresentationColorStyle,\n)\n\nconst Presentation = styled(PresentationColor)<\n  ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps\n>(responsiveRadiusStyle, textInputRepresentationStyle)\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        data-ui=\"TextInput__presentation\"\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          data-ui=\"TextInput__input\"\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":"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"}
+{"version":3,"file":"textInput-ByCyqiAh.js","names":["() => {\n    ref.current?.setCustomValidity(customValidity || '')\n  }","[customValidity, ref]","ref.current?.setCustomValidity","_c","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        data-ui=\"TextInput__presentation\"\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        data-ui=\"TextInput__presentation\"\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          data-ui=\"TextInput__input\"\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          data-ui=\"TextInput__input\"\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          data-ui=\"TextInput__input\"\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","_c"],"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 const textInputBaseStyle = 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  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\nexport function textInputColorStyle(\n  props: Pick<TextInputInputStyleProps, '$scheme' | '$tone'> & ThemeProps,\n): ReturnType<typeof css> {\n  const {$scheme, $tone} = props\n  const {color} = getTheme_v2(props.theme)\n\n  return css`\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 textInputFontStyle(\n  props: Pick<TextInputInputStyleProps, '$weight'> & ThemeProps,\n): CSSObject {\n  const {$weight} = props\n  const {font} = getTheme_v2(props.theme)\n\n  return {\n    fontFamily: font.text.family,\n    fontWeight: `${($weight && font.text.weights[$weight]) || font.text.weights.regular}`,\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: Pick<TextInputRepresentationStyleProps, '$hasPrefix' | '$hasSuffix'>,\n): ReturnType<typeof css> {\n  const {$hasPrefix, $hasSuffix} = props\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}\n\nexport function textInputRepresentationColorStyle(\n  props: Omit<TextInputRepresentationStyleProps, '$hasPrefix' | '$hasSuffix'> & ThemeProps,\n): ReturnType<typeof css> {\n  const {$scheme, $tone, $unstableDisableFocusRing} = props\n  const {color, input} = getTheme_v2(props.theme)\n\n  return css`\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 {css} from '#styled-system/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 = css({\n  alignItems: 'center',\n})\n\nexport const textAreaRoot = css({\n  'alignItems': 'center',\n  '&:not([hidden])': {\n    display: 'flex',\n  },\n})\n\nexport const inputRoot = css({\n  flex: 1,\n  minWidth: 0,\n  display: 'block',\n  position: 'relative',\n})\n","import {css} from '#styled-system/css'\n\nexport const textInputLeftBox = css({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n})\n\nexport const textInputRightBox = css({\n  position: 'absolute',\n  top: 0,\n  right: 0,\n})\n\nexport const textInputClearButton = css({\n  '&:not([hidden])': {\n    display: 'block',\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  textInputColorStyle,\n  textInputFontSizeStyle,\n  textInputFontStyle,\n  TextInputInputStyleProps,\n  textInputRepresentationColorStyle,\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 InputBase = styled.input`\n  ${textInputBaseStyle}\n`\n\nconst InputColor = styled(InputBase)<TextInputInputStyleProps>(textInputColorStyle)\n\nconst Input = styled(InputColor)<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(\n  responsiveInputPaddingStyle,\n  textInputFontStyle,\n  textInputFontSizeStyle,\n)\n\nconst PresentationColor = styled.span<TextInputRepresentationStyleProps>(\n  textInputRepresentationColorStyle,\n)\n\nconst Presentation = styled(PresentationColor)<\n  ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps\n>(responsiveRadiusStyle, textInputRepresentationStyle)\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        data-ui=\"TextInput__presentation\"\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          data-ui=\"TextInput__input\"\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":"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"}

package/dist/toast.js

@@ -1,8 +1,8 @@
 "use client";
 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-D_TnC6On.js";
 import { t as Flex } from "./flex-ohP2jG9d.js";
-import { n as Text, t as Stack } from "./stack-CPdFknrG.js";
-import { t as Button } from "./button-Bp0udHV9.js";
+import { n as Text, t as Stack } from "./stack-TOlBMvbq.js";
+import { t as Button } from "./button-DLiQy0Qz.js";
 import { t as Grid } from "./grid-D-gOpN8z.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx/lite";
@@ -20,9 +20,7 @@ const STATUS_CARD_TONE = {
 	warning: "caution",
 	success: "positive",
 	info: "neutral"
-};
-var loadingBarProgress = "_1a5lj7y4", toast = "_1a5lj7y0", toastText = "_1a5lj7y1";
-const ROLES = {
+}, ROLES = {
 	error: "alert",
 	warning: "alert",
 	success: "alert",
@@ -45,7 +43,7 @@ function Toast(props) {
 		bounce: .25
 	} : { duration: 0 }, $[11] = visualDuration, $[12] = t1);
 	let transition = t1, hasDuration = duration && isFinite(duration) && duration < 20736e5, t2;
-	$[13] === className ? t2 = $[14] : (t2 = clsx(toast, className), $[13] = className, $[14] = t2);
+	$[13] === className ? t2 = $[14] : (t2 = clsx("fqYOpD jieZfE emPzDJ diGfnu kHypAY", className), $[13] = className, $[14] = t2);
 	let t3 = hasDuration ? "" : void 0, t4;
 	$[15] === title ? t4 = $[16] : (t4 = title && /* @__PURE__ */ jsx(Text, {
 		size: 1,
@@ -62,7 +60,7 @@ function Toast(props) {
 	}), $[17] = description, $[18] = transition, $[19] = t5) : t5 = $[19];
 	let t6;
 	$[20] !== t4 || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsx(Flex, {
-		className: toastText,
+		className: "hWHAvy",
 		flex: 1,
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Stack, {
@@ -92,12 +90,12 @@ function Toast(props) {
 	}), $[27] = t6, $[28] = t7, $[29] = transition, $[30] = t8) : t8 = $[30];
 	let t9;
 	$[31] !== cardTone || $[32] !== duration || $[33] !== hasDuration || $[34] !== onClose || $[35] !== radius || $[36] !== transition || $[37] !== updatedAt || $[38] !== visualDuration ? (t9 = hasDuration && /* @__PURE__ */ jsxs(motion.div, {
-		className: "_1a5lj7y2",
+		className: "hxBzcr fUjdzo klNMOT HgOzd dYEDcH fqYOpD cERSkX lhPceK gRUupw jsTwnL hTsYDY jBWBiF",
 		"data-ui": "ToastLoadingBar",
 		variants: content,
 		transition,
 		children: [/* @__PURE__ */ jsx(Card, {
-			className: "_1a5lj7y3",
+			className: "oQGpJ fkylxA lhPceK ckbANH qbeer dStxMA",
 			tone: cardTone,
 			radius
 		}), /* @__PURE__ */ jsx(LoadingBarProgress, {
@@ -130,7 +128,7 @@ function Toast(props) {
 }
 function LoadingBarProgress(props) {
 	let $ = c(12), { duration, onComplete, tone, visualDuration } = props, { color } = useTheme_v2(), t0 = color.button.default[tone], t1;
-	$[0] === t0.enabled.bg ? t1 = $[1] : (t1 = { "--toast-loading-bar-bg": t0.enabled.bg }, $[0] = t0.enabled.bg, $[1] = t1);
+	$[0] === t0.enabled.bg ? t1 = $[1] : (t1 = { backgroundColor: t0.enabled.bg }, $[0] = t0.enabled.bg, $[1] = t1);
 	let t2, t3;
 	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = { scaleX: 0 }, t3 = { scaleX: 1 }, $[2] = t2, $[3] = t3) : (t2 = $[2], t3 = $[3]);
 	let t4 = duration / 1e3, t5;
@@ -141,7 +139,7 @@ function LoadingBarProgress(props) {
 	}, $[4] = t4, $[5] = visualDuration, $[6] = t5) : t5 = $[6];
 	let t6;
 	return $[7] !== onComplete || $[8] !== t1 || $[9] !== t5 || $[10] !== tone ? (t6 = /* @__PURE__ */ jsx(MotionCard, {
-		className: loadingBarProgress,
+		className: "krAvjf ePwsZv dszIPX diGfnu",
 		tone,
 		style: t1,
 		initial: t2,
@@ -192,7 +190,6 @@ function _temp$1() {
 	return !0;
 }
 const subscribe = () => () => {}, ToastContext = createGlobalScopedContext("@sanity/ui/context/toast", null);
-var toastLayer = "_1ojgmwx0";
 /**
 * @internal
 */
@@ -202,7 +199,7 @@ function ToastLayer(props) {
 	let t3;
 	return $[2] !== children || $[3] !== gap || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsx(Grid, {
 		as: "ul",
-		className: toastLayer,
+		className: "kyGdCf ixvSSg hEzNkW hyZffN cERSkX kdNbGf hWgptE diGfnu",
 		"data-ui": "ToastProvider",
 		padding,
 		paddingX,

package/dist/toast.js.map

@@ -1 +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    />","_c","() => true","() => false","_temp","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>","_c","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","_c"],"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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"}
+{"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","{backgroundColor: 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={{backgroundColor: 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    />","_c","() => true","() => false","_temp","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>","_c","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","_c"],"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 {css, firstThatWorks} from '#styled-system/css'\n\nconst LOADING_BAR_HEIGHT = 2\n\nexport const toast = css({\n  'pointerEvents': 'all',\n  'width': '100%',\n  'position': 'relative',\n  'overflow': firstThatWorks('clip', 'hidden'),\n  '&[data-has-duration]': {\n    paddingBottom: `calc(${LOADING_BAR_HEIGHT}px / 2)`,\n  },\n})\n\nexport const toastText = css({\n  overflowX: 'auto',\n})\n\nexport const loadingBar = css({\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: firstThatWorks('clip', 'hidden'),\n  background: 'transparent',\n  alignItems: 'flex-end',\n  willChange: 'opacity',\n})\n\nexport const loadingBarMask = css({\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 = css({\n  display: 'block',\n  height: '100%',\n  width: '100%',\n  transformOrigin: '0% 50%',\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={{backgroundColor: 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 {css} from '#styled-system/css'\n\nexport const toastLayer = css({\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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"}

package/dist/tooltip.js

@@ -2,8 +2,8 @@
 import { l as POPOVER_MOTION_PROPS, n as _getArrayProp } from "./helpers-XThPpWje.js";
 import { _ as useTheme_v2, d as createGlobalScopedContext, i as usePrefersReducedMotion, s as Card } from "./useLayer-D_TnC6On.js";
 import { a as useReferenceElement, i as origin, n as AnimateActivity, r as getTransformOrigin, s as useLatestRef, t as getElementRef } from "./getElementRef-BLVMlHTn.js";
-import { a as resolvePortalElement, n as Portal, o as useBoundaryElement, r as usePortal, t as Arrow } from "./arrow-MMVAW3Ew.js";
-import { t as Layer } from "./layer-DP8gT1ex.js";
+import { a as resolvePortalElement, n as Portal, o as useBoundaryElement, r as usePortal, t as Arrow } from "./arrow-BVbVEhyN.js";
+import { t as Layer } from "./layer-CA793bFP.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx/lite";
 import { Activity, cloneElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
@@ -115,9 +115,7 @@ const DEFAULT_FALLBACK_PLACEMENTS = {
 		"top-end",
 		"bottom-end"
 	]
-};
-var tooltipCard = "_54iwec1", tooltipLayer = "_54iwec0";
-const MotionCard = motion.create(Card);
+}, MotionCard = motion.create(Card);
 /**
 * @internal
 */
@@ -140,7 +138,7 @@ function TooltipCard(props) {
 		bottom: void 0
 	}, $[25] = t3, $[26] = t4, $[27] = t5) : t5 = $[27];
 	let arrowStyle = t5, t6;
-	$[28] === className ? t6 = $[29] : (t6 = clsx(tooltipCard, className), $[28] = className, $[29] = t6);
+	$[28] === className ? t6 = $[29] : (t6 = clsx("hVYkZh", className), $[28] = className, $[29] = t6);
 	let t7 = animate ? POPOVER_MOTION_PROPS : void 0, t8;
 	$[30] !== arrow || $[31] !== arrowRef || $[32] !== arrowStyle ? (t8 = arrow && /* @__PURE__ */ jsx(Arrow, {
 		ref: arrowRef,
@@ -299,7 +297,7 @@ function Tooltip(props) {
 		let t30;
 		return $[82] === Symbol.for("react.memo_cache_sentinel") ? (t30 = /* @__PURE__ */ jsx(Fragment$1, {}), $[82] = t30) : t30 = $[82], t30;
 	}
-	let T0 = Layer, t31 = clsx(tooltipLayer, restProps.className), t32;
+	let T0 = Layer, t31 = clsx("cERSkX", restProps.className), t32;
 	$[83] !== animate || $[84] !== arrowProp || $[85] !== arrowX || $[86] !== arrowY || $[87] !== content || $[88] !== originX || $[89] !== originY || $[90] !== padding || $[91] !== placement || $[92] !== radius || $[93] !== restProps || $[94] !== scheme || $[95] !== setArrow || $[96] !== setFloating || $[97] !== shadow ? (t32 = /* @__PURE__ */ jsx(TooltipCard, {
 		...restProps,
 		animate,