@sanity/ui 4.0.7 → 4.1.1

package/dist/{arrow-CL8xmdbg.js → arrow-DKn5YKdy.js}

@@ -1,4 +1,4 @@
-import { _ as useTheme_v2, d as createGlobalScopedContext, f as globalScope, r as isRecord } from "./useLayer-jUJIz8mh.js";
+import { _ as useTheme_v2, d as createGlobalScopedContext, f as globalScope, r as isRecord } from "./useLayer-D1usxIE0.js";
 import { c } from "react/compiler-runtime";
 import { useContext } from "react";
 import { css, styled } from "styled-components";
@@ -80,13 +80,13 @@ function compileCommands(cmds) {
 }
 const StyledArrow = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledArrow",
-	componentId: "sc-4ve9v8-0"
+	componentId: "sc-q06uyo-0"
 })(({ $w: w }) => css`position:absolute;width:${w}px;height:${w}px;:empty + &{display:none;}& > svg{display:block;line-height:0;transform-origin:${w / 2}px ${w / 2}px;}[data-placement^='top'] > &{bottom:-${w}px;& > svg{transform:rotate(0);}}[data-placement^='right'] > &{left:-${w}px;& > svg{transform:rotate(90deg);}}[data-placement^='left'] > &{right:-${w}px;& > svg{transform:rotate(-90deg);}}[data-placement^='bottom'] > &{top:-${w}px;& > svg{transform:rotate(180deg);}}`), StrokePath = styled.path.withConfig({
 	displayName: "StrokePath",
-	componentId: "sc-4ve9v8-1"
+	componentId: "sc-q06uyo-1"
 })`stroke:var(--card-shadow-outline-color);`, ShapePath = styled.path.withConfig({
 	displayName: "ShapePath",
-	componentId: "sc-4ve9v8-2"
+	componentId: "sc-q06uyo-2"
 })`fill:var(--card-bg-color);`;
 /** @internal */
 function Arrow(props) {
@@ -150,6 +150,7 @@ function Arrow(props) {
 	}), $[19] = t2, $[20] = t3, $[21] = t5, $[22] = t6, $[23] = w, $[24] = t7) : t7 = $[24];
 	let t8;
 	return $[25] !== ref || $[26] !== restProps || $[27] !== t7 || $[28] !== w ? (t8 = /* @__PURE__ */ jsx(StyledArrow, {
+		"data-ui": "Arrow",
 		...restProps,
 		$w: w,
 		ref,
@@ -158,4 +159,4 @@ function Arrow(props) {
 }
 export { useBoundaryElement as a, PortalContext as i, Portal as n, BoundaryElementContext as o, usePortal as r, Arrow as t };
 
-//# sourceMappingURL=arrow-CL8xmdbg.js.map
+//# sourceMappingURL=arrow-DKn5YKdy.js.map

package/dist/arrow-DKn5YKdy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-DKn5YKdy.js","names":["createPortal(children, portalElement)","radius = 0","compileCommands(cmds)","<mask id=\"stroke-mask\">\n          <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n        </mask>","<StrokePath d={strokePath} mask=\"url(#stroke-mask)\" strokeWidth={strokeWidth * 2} />","strokeWidth * 2","<ShapePath d={fillPath} />","<svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n        <mask id=\"stroke-mask\">\n          <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n        </mask>\n        <StrokePath d={strokePath} mask=\"url(#stroke-mask)\" strokeWidth={strokeWidth * 2} />\n        <ShapePath d={fillPath} />\n      </svg>","`0 0 ${w} ${w}`","<StyledArrow data-ui=\"Arrow\" {...restProps} $w={w} ref={ref}>\n      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n        <mask id=\"stroke-mask\">\n          <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n        </mask>\n        <StrokePath d={strokePath} mask=\"url(#stroke-mask)\" strokeWidth={strokeWidth * 2} />\n        <ShapePath d={fillPath} />\n      </svg>\n    </StyledArrow>"],"sources":["../src/core/utils/boundaryElement/boundaryElementContext.ts","../src/core/utils/boundaryElement/useBoundaryElement.ts","../src/core/utils/portal/portalContext.ts","../src/core/utils/portal/usePortal.ts","../src/core/utils/portal/portal.ts","../src/core/utils/arrow/cmds.ts","../src/core/utils/arrow/arrow.tsx"],"sourcesContent":["import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {BoundaryElementContextValue} from './types'\n\nexport const BoundaryElementContext = createGlobalScopedContext<BoundaryElementContextValue | null>(\n  '@sanity/ui/context/boundaryElement',\n  null,\n)\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {BoundaryElementContext} from './boundaryElementContext'\nimport {BoundaryElementContextValue} from './types'\n\nconst DEFAULT_VALUE: BoundaryElementContextValue = {\n  version: 0.0,\n  element: null,\n}\n\n/**\n * @public\n */\nexport function useBoundaryElement(): BoundaryElementContextValue {\n  const value = useContext(BoundaryElementContext)\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 (value && (!isRecord(value) || value.version !== 0.0)) {\n    throw new Error('useBoundaryElement(): the context value is not compatible')\n  }\n\n  return value || DEFAULT_VALUE\n}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {globalScope} from '../../lib/globalScope'\nimport {PortalContextValue} from './types'\n\nconst key = '@sanity/ui/context/portal'\nconst elementKey = Symbol.for(`${key}/element`)\n\nglobalScope[elementKey] = null\n\nconst defaultContextValue: PortalContextValue = {\n  version: 0.0,\n  boundaryElement: null,\n  get element() {\n    if (typeof document === 'undefined') {\n      return null\n    }\n\n    if (globalScope[elementKey]) {\n      return globalScope[elementKey]\n    }\n\n    globalScope[elementKey] = document.createElement('div')\n    globalScope[elementKey].setAttribute('data-portal', '')\n\n    document.body.appendChild(globalScope[elementKey])\n\n    return globalScope[elementKey]\n  },\n}\n\nexport const PortalContext = createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {PortalContext} from './portalContext'\nimport {PortalContextValue} from './types'\n\n/**\n * @public\n */\nexport function usePortal(): PortalContextValue {\n  const value = useContext(PortalContext)\n\n  if (!value) {\n    throw new Error('usePortal(): 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('usePortal(): the context value is not compatible')\n  }\n\n  return value\n}\n","import {createPortal} from 'react-dom'\n\nimport {usePortal} from './usePortal'\n\n/**\n * @public\n */\nexport interface PortalProps {\n  children: React.ReactNode\n  /**\n   * @beta This API might change. DO NOT USE IN PRODUCTION.\n   */\n  __unstable_name?: string\n}\n\n/**\n * @public\n */\nexport function Portal(props: PortalProps): React.ReactPortal | null {\n  const {children, __unstable_name: name} = props\n  const portal = usePortal()\n  const portalElement =\n    (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default\n\n  if (!portalElement) {\n    return null\n  }\n\n  return createPortal(children, portalElement)\n}\n","interface PointCmd {\n  type: 'point'\n  x: number\n  y: number\n  radius?: number\n}\n\ninterface CurveCmd {\n  type: 'curve'\n  startControl: Point\n  endControl: Point\n  curveEnd: Point\n}\n\nexport type Cmd = PointCmd | CurveCmd\n\nexport interface Point {\n  x: number\n  y: number\n  radius?: number\n}\n\nfunction moveTowardsLength(movingPoint: Point, targetPoint: Point, amount: number) {\n  const width = targetPoint.x - movingPoint.x\n  const height = targetPoint.y - movingPoint.y\n\n  const distance = Math.sqrt(width * width + height * height)\n\n  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance))\n}\n\nfunction moveTowardsFractional(movingPoint: Point, targetPoint: Point, fraction: number): Point {\n  return {\n    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,\n    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction,\n  }\n}\n\nexport function getRoundedCommands(points: Point[]): Cmd[] {\n  const len = points.length\n\n  const cmds: Cmd[] = []\n\n  for (let i = 0; i < len; i += 1) {\n    const point = points[i]\n    const prevPoint = points[i - 1]\n    const nextPoint = points[i + 1]\n\n    if (prevPoint && point.radius) {\n      const curveStart = moveTowardsLength(point, prevPoint, point.radius)\n      const curveEnd = moveTowardsLength(point, nextPoint, point.radius)\n      const startControl = moveTowardsFractional(curveStart, point, 0.5)\n      const endControl = moveTowardsFractional(point, curveEnd, 0.5)\n\n      cmds.push({\n        type: 'point',\n        ...curveStart,\n      })\n\n      cmds.push({\n        type: 'curve',\n        curveEnd,\n        startControl,\n        endControl,\n      })\n    } else {\n      cmds.push({\n        type: 'point',\n        ...point,\n      })\n    }\n  }\n\n  return cmds\n}\n\nexport function compileCommands(cmds: Cmd[]): string {\n  return cmds\n    .map((n, idx) => {\n      if (n.type === 'point') {\n        return `${idx === 0 ? 'M' : 'L'} ${n.x} ${n.y}`\n      }\n\n      if (n.type === 'curve') {\n        return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`\n      }\n\n      return ``\n    })\n    .join(' ')\n}\n","import {HTMLProps} from 'react'\nimport {css, styled} from 'styled-components'\n\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {compileCommands, getRoundedCommands, Point} from './cmds'\n\nconst StyledArrow = styled.div<{$w: number}>(\n  ({$w: w}) => css`\n    position: absolute;\n    width: ${w}px;\n    height: ${w}px;\n\n    :empty + & {\n      display: none;\n    }\n\n    & > svg {\n      display: block;\n      line-height: 0;\n      transform-origin: ${w / 2}px ${w / 2}px;\n    }\n\n    [data-placement^='top'] > & {\n      bottom: -${w}px;\n\n      & > svg {\n        transform: rotate(0);\n      }\n    }\n\n    [data-placement^='right'] > & {\n      left: -${w}px;\n\n      & > svg {\n        transform: rotate(90deg);\n      }\n    }\n\n    [data-placement^='left'] > & {\n      right: -${w}px;\n\n      & > svg {\n        transform: rotate(-90deg);\n      }\n    }\n\n    [data-placement^='bottom'] > & {\n      top: -${w}px;\n\n      & > svg {\n        transform: rotate(180deg);\n      }\n    }\n  `,\n)\n\nconst StrokePath = styled.path`\n  stroke: var(--card-shadow-outline-color);\n`\n\nconst ShapePath = styled.path`\n  fill: var(--card-bg-color);\n`\n\n/** @internal */\nexport function Arrow(\n  props: {width: number; height: number; radius?: number} & Omit<\n    HTMLProps<HTMLDivElement>,\n    'width' | 'height'\n  >,\n): React.JSX.Element {\n  const {width: w, height: h, radius = 0, ref, ...restProps} = props\n  const {card} = useTheme_v2()\n  const strokeWidth = card.shadow.outline\n\n  const center = w / 2\n\n  const points: Point[] = [\n    {\n      x: 0,\n      y: 0,\n    },\n    {\n      x: radius,\n      y: 0,\n      radius,\n    },\n    {\n      x: center,\n      y: h - 1,\n      radius,\n    },\n    {\n      x: w - radius,\n      y: 0,\n      radius,\n    },\n    {\n      x: w,\n      y: 0,\n    },\n  ]\n\n  const cmds = getRoundedCommands(points)\n  const path = compileCommands(cmds)\n\n  // oxlint-disable-next-line no-unnecessary-template-expression\n  const strokePath = `${path}`\n  const fillPath = `${path} M ${w} -1 M 0 -1 Z`\n\n  return (\n    <StyledArrow data-ui=\"Arrow\" {...restProps} $w={w} ref={ref}>\n      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n        <mask id=\"stroke-mask\">\n          <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n        </mask>\n        <StrokePath d={strokePath} mask=\"url(#stroke-mask)\" strokeWidth={strokeWidth * 2} />\n        <ShapePath d={fillPath} />\n      </svg>\n    </StyledArrow>\n  )\n}\n"],"mappings":";;;;;;AAGA,MAAa,yBAAyB,0BACpC,sCACA,IACF,GCAM,gBAA6C;CACjD,SAAS;CACT,SAAS;AACX;;;;AAKA,SAAgB,qBAAkD;CAChE,IAAM,QAAQ,WAAW,sBAAsB;CAK/C,IAAI,UAAU,CAAC,SAAS,KAAK,KAAK,MAAM,YAAY,IAClD,MAAU,MAAM,2DAA2D;CAG7E,OAAO,SAAS;AAClB;ACrBA,MAAM,MAAM,6BACN,aAAa,OAAO,IAAI,GAAG,IAAI,SAAS;AAE9C,YAAY,cAAc;AAuB1B,MAAa,gBAAgB,0BAA8C,KAAK;CApB9E,SAAS;CACT,iBAAiB;CACjB,IAAI,UAAU;EAcZ,OAbI,OAAO,WAAa,MACf,OAGL,YAAY,cACP,YAAY,eAGrB,YAAY,cAAc,SAAS,cAAc,KAAK,GACtD,YAAY,WAAW,CAAC,aAAa,eAAe,EAAE,GAEtD,SAAS,KAAK,YAAY,YAAY,WAAW,GAE1C,YAAY;CACrB;AAG8E,CAAmB;;;;ACrBnG,SAAgB,YAAgC;CAC9C,IAAM,QAAQ,WAAW,aAAa;CAEtC,IAAI,CAAC,OACH,MAAU,MAAM,oCAAoC;CAMtD,IAAI,CAAC,SAAS,KAAK,KAAK,MAAM,YAAY,GACxC,MAAU,MAAM,kDAAkD;CAGpE,OAAO;AACT;;;;ACNA,SAAgB,OAAO,OAA8C;eAC7D,EAAC,UAAU,iBAAiB,SAAQ,OACpC,SAAS,UAAU,GACnB,iBACH,OAAO,OAAO,YAAY,OAAO,SAAS,QAAQ,OAAO,YAAY,OAAO,UAAU;CAEzF,IAAI,CAAC,eACH,OAAO;CAGFA,IAAAA;CAAP,OAAoB,EAAA,OAAA,YAAA,EAAA,OAAU,iBAAvB,KAAA,aAAa,UAAU,aAAa,GAAvB,EAAA,KAAA,UAAU,EAAA,KAAA,uCAAvBA;AACT;ACPA,SAAS,kBAAkB,aAAoB,aAAoB,QAAgB;CACjF,IAAM,QAAQ,YAAY,IAAI,YAAY,GACpC,SAAS,YAAY,IAAI,YAAY,GAErC,WAAW,KAAK,KAAK,QAAQ,QAAQ,SAAS,MAAM;CAE1D,OAAO,sBAAsB,aAAa,aAAa,KAAK,IAAI,GAAG,SAAS,QAAQ,CAAC;AACvF;AAEA,SAAS,sBAAsB,aAAoB,aAAoB,UAAyB;CAC9F,OAAO;EACL,GAAG,YAAY,KAAK,YAAY,IAAI,YAAY,KAAK;EACrD,GAAG,YAAY,KAAK,YAAY,IAAI,YAAY,KAAK;CACvD;AACF;AAEA,SAAgB,mBAAmB,QAAwB;CACzD,IAAM,MAAM,OAAO,QAEb,OAAc,CAAC;CAErB,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,KAAK,GAAG;EAC/B,IAAM,QAAQ,OAAO,IACf,YAAY,OAAO,IAAI,IACvB,YAAY,OAAO,IAAI;EAE7B,IAAI,aAAa,MAAM,QAAQ;GAC7B,IAAM,aAAa,kBAAkB,OAAO,WAAW,MAAM,MAAM,GAC7D,WAAW,kBAAkB,OAAO,WAAW,MAAM,MAAM,GAC3D,eAAe,sBAAsB,YAAY,OAAO,EAAG,GAC3D,aAAa,sBAAsB,OAAO,UAAU,EAAG;GAO7D,AALA,KAAK,KAAK;IACR,MAAM;IACN,GAAG;GACL,CAAC,GAED,KAAK,KAAK;IACR,MAAM;IACN;IACA;IACA;GACF,CAAC;EACH,OACE,KAAK,KAAK;GACR,MAAM;GACN,GAAG;EACL,CAAC;CAEL;CAEA,OAAO;AACT;AAEA,SAAgB,gBAAgB,MAAqB;CACnD,OAAO,KACJ,KAAK,GAAG,QACH,EAAE,SAAS,UACN,GAAG,QAAQ,IAAI,MAAM,IAAI,GAAG,EAAE,EAAE,GAAG,EAAE,MAG1C,EAAE,SAAS,UACN,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,MAG9G,EACR,CAAC,CACD,KAAK,GAAG;AACb;ACpFA,MAAM,cAAc,uBAAO,IAAA,WAAA;;;AACxB,CAAA,CAAA,EAAA,EAAC,IAAI,QAAO,GAAG,2BAEL,EAAE,YACD,EAAE,mFASU,IAAI,EAAE,KAAK,IAAI,EAAE,0CAI1B,EAAE,uEAQJ,EAAE,2EAQD,EAAE,4EAQJ,EAAE,uCAOhB,GAEM,aAAa,OAAO,KAAA,WAAA;;;AAAI,CAAA,CAAA,4CAIxB,YAAY,OAAO,KAAA,WAAA;;;AAAI,CAAA,CAAA;;AAK7B,SAAgB,MACd,OAImB;gBACM,GAAe,KAAQ,WAApBC,IAAd;CAA+C,AAAA,EAAA,OAAA,yEAAvD,CAAC,OAAO,GAAG,QAAQ,GAAG,QAAA,IAAY,KAAK,GAAA,aAAgB;CAAjC,IAAA,SAAA,OAAA,KAAA,IAAS,IAATA,IACtB,EAAC,SAAQ,YAAY,GACrB,cAAc,KAAK,OAAO,SAE1B,SAAS,IAAI,GA6BNC;CAhBN,AAAA,EAAA,OAAA,UAAA,EAAA,OACA,KAAA,EAAA,OANA,UAAA,EAAA,OAUA,KAWM,KAAA,gBADA,mBAAmB;EAzB9B;GACE,GAAG;GACH,GAAG;EACL;EACA;GACE,GAAG;GACH,GAAG;GACH;EACF;EACA;GACE,GAAG;GACH,GAAG,IAAI;GACP;EACF;EACA;GACE,GAAG,IAAI;GACP,GAAG;GACH;EACF;EACA;GACE,GAAG;GACH,GAAG;EACL;CAG8B,CACH,CAAI,GAhB1B,EAAA,KAAA,QACA,EAAA,KAAA,GANA,EAAA,KAAA,QAUA,EAAA,KAAA;CAWP,IAAM,OAAOA,IAGP,aAAa,GAAG,QAChB,WAAW,GAAG,KAAK,KAAK,EAAE,eAIO,KAAA,OAAO,EAAE,GAAG,KAC7CC;CACiB,AAAA,EAAA,QAAA,eAAA,EAAA,QAAoB,KADrC,KAAA,oBAAC,QAAD;EAAM,IAAG;EACP,UAAA,oBAAC,QAAD;GAAM,GAAG;GAAG,GAAG;GAAa,OAAO;GAAG,QAAQ;GAAG,MAAK;EAAS,CAAA;CAC3D,CAAA,GADW,EAAA,MAAA,aAAoB,EAAA,MAAA;CAE4B,IAAA,KAAA,cAAc,GAA/EC;CAAe,AAAA,EAAA,QAAA,cAAA,EAAA,QAAkDC,MAAjE,KAAA,oBAAC,YAAD;EAAY,GAAG;EAAY,MAAK;EAAoB,aAAaA;CAAkB,CAAA,GAApE,EAAA,MAAA,YAAkDA,EAAAA,MAAAA;CACjEC,IAAAA;CAAc,AAAA,EAAA,QAAA,yBAAd,KAAA,oBAAC,WAAD,EAAW,GAAG,SAAW,CAAA,GAAX,EAAA,MAAA;CALhBC,IAAAA;CAAmCC,AAAAA,EAAAA,QAAAA,MAAAA,EAAAA,QACjCL,MAAAA,EAAAA,QAGAC,MAAAA,EAAAA,QACAE,MAAAA,EAAAA,QALU,KAAZ,KAAA,qBAAC,OAAD;EAAK,OAAO;EAAG,QAAQ;EAAG,SAASE;EAAnC,UAAA;GACEL;GAGAC;GACAE;EACG;KAN8BE,EAAAA,MAAAA,IACjCL,EAAAA,MAAAA,IAGAC,EAAAA,MAAAA,IACAE,EAAAA,MAAAA,IALU,EAAA,MAAA;CADdG,IAAAA;CADF,OAC0D,EAAA,QAAA,OAAA,EAAA,QAAvB,aAAA,EAAA,QAC/BF,MAAAA,EAAAA,QAD8C,KAAhD,KAAA,oBAAC,aAAD;EAAa,WAAQ;EAAQ,GAAI;EAAW,IAAI;EAAQ;EACtDA,UAAAA;CAOW,CAAA,GAR2C,EAAA,MAAA,KAAvB,EAAA,MAAA,WAC/BA,EAAAA,MAAAA,IAD8C,EAAA,MAAA,6BAAhDE;AAUJ"}

package/dist/autocomplete.d.ts

@@ -135,6 +135,6 @@ interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocomp
  *
  * @public
  */
-declare function Autocomplete<Option extends BaseAutocompleteOption>(props: AutocompleteProps<Option> & Omit<HTMLProps<HTMLInputElement>, 'aria-activedescendant' | 'aria-autocomplete' | 'aria-expanded' | 'aria-owns' | 'as' | 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'id' | 'inputMode' | 'onChange' | 'onSelect' | 'popover' | 'prefix' | 'role' | 'spellCheck' | 'type' | 'value'>): import("react").JSX.Element;
-export { Autocomplete, type AutocompleteInputChangeMsg, type AutocompleteInputFoocusMsg, type AutocompleteMsg, type AutocompleteOpenButtonProps, type AutocompleteProps, type AutocompleteRootBlurMsg, type AutocompleteRootClearMsg, type AutocompleteRootEscapeMsg, type AutocompleteRootOpenMsg, type AutocompleteRootSetActiveValueMsg, type AutocompleteRootSetListFocusedMsg, type AutocompleteState, type AutocompleteValueChangeMsg, type BaseAutocompleteOption };
+export declare function Autocomplete<Option extends BaseAutocompleteOption>(props: AutocompleteProps<Option> & Omit<HTMLProps<HTMLInputElement>, 'aria-activedescendant' | 'aria-autocomplete' | 'aria-expanded' | 'aria-owns' | 'as' | 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'id' | 'inputMode' | 'onChange' | 'onSelect' | 'popover' | 'prefix' | 'role' | 'spellCheck' | 'type' | 'value'>): import("react").JSX.Element;
+export type { AutocompleteInputChangeMsg, AutocompleteInputFoocusMsg, AutocompleteMsg, AutocompleteOpenButtonProps, AutocompleteProps, AutocompleteRootBlurMsg, AutocompleteRootClearMsg, AutocompleteRootEscapeMsg, AutocompleteRootOpenMsg, AutocompleteRootSetActiveValueMsg, AutocompleteRootSetListFocusedMsg, AutocompleteState, AutocompleteValueChangeMsg, BaseAutocompleteOption };
 //# sourceMappingURL=autocomplete.d.ts.map

package/dist/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","names":[],"sources":["../src/core/components/autocomplete/types.ts","../src/core/components/autocomplete/autocomplete.tsx"],"mappings":";;;;;;;KAKY,8BAA8B,iBACxC,KAAK,MAAM,UAAU;;;;UAKN;EACf;;;;;UAMe;EACf;EACA;EACA;EACA;EACA;;;;;UAMe;EACf;;;;;UAMe;EACf;;;;;UAMe;EACf;;;;;UAMe;EACf;EACA;;;;;UAMe;EACf;EACA;EACA;;;;;UAMe;EACf;EACA;;;;;UAMe;EACf;EACA;;;;;UAMe;EACf;;;;;UAMe;EACf;EACA;;;;;KAMU,kBACR,0BACA,2BACA,4BACA,0BACA,oCACA,oCACA,6BACA,6BACA;;;;UC1Da,kBAAkB,eAAe,yBAAyB;EACzE;EACA;EACA,gBAAgB,eAAe,QAAQ;EACvC;EAEA,OAAO,cAAc;EACrB;;EAEA,UAAU;EACV;EACA,YAAY;EACZ,iBAAiB;EACjB,YAAY;;EAEZ,uBAAuB;;EAEvB;;EAEA,UAAU;EACV;EACA,UAAU,KAAK,sEACb,KAAK,UAAU;EACjB,SAAS;EACT,SAAS,SAAS;;EAElB,kBAAkB;;EAElB,gBAAgB,QAAQ,WAAW,MAAM,IAAI;;EAE7C,iBACE;IACE,SAAS,MAAM,IAAI;IACnB;IACA,cAAc;IACd;IACA;KAEF,KAAK,IAAI,oBACN;EACL,eAAe,eAAe,SAAS;EACvC,SAAS;;EAET;;;;;;;;iBAec,aAAa,eAAe,wBAC1C,OAAO,kBAAkB,UACvB,KACE,UAAU,gSAmBX,IAAA"}
+{"version":3,"file":"autocomplete.d.ts","names":[],"sources":["../src/core/components/autocomplete/types.ts","../src/core/components/autocomplete/autocomplete.tsx"],"mappings":";;;;;;;KAKY,8BAA8B,iBACxC,KAAK,MAAM,UAAU;;;;UAKN;EACf;;;;;UAMe;EACf;EACA;EACA;EACA;EACA;;;;;UAMe;EACf;;;;;UAMe;EACf;;;;;UAMe;EACf;;;;;UAMe;EACf;EACA;;;;;UAMe;EACf;EACA;EACA;;;;;UAMe;EACf;EACA;;;;;UAMe;EACf;EACA;;;;;UAMe;EACf;;;;;UAMe;EACf;EACA;;;;;KAMU,kBACR,0BACA,2BACA,4BACA,0BACA,oCACA,oCACA,6BACA,6BACA;;;;UCzDa,kBAAkB,eAAe,yBAAyB;EACzE;EACA;EACA,gBAAgB,eAAe,QAAQ;EACvC;EAEA,OAAO,cAAc;EACrB;;EAEA,UAAU;EACV;EACA,YAAY;EACZ,iBAAiB;EACjB,YAAY;;EAEZ,uBAAuB;;EAEvB;;EAEA,UAAU;EACV;EACA,UAAU,KAAK,sEACb,KAAK,UAAU;EACjB,SAAS;EACT,SAAS,SAAS;;EAElB,kBAAkB;;EAElB,gBAAgB,QAAQ,WAAW,MAAM,IAAI;;EAE7C,iBACE;IACE,SAAS,MAAM,IAAI;IACnB;IACA,cAAc;IACd;IACA;KAEF,KAAK,IAAI,oBACN;EACL,eAAe,eAAe,SAAS;EACvC,SAAS;;EAET;;;;;;;;wBAec,aAAa,eAAe,wBAC1C,OAAO,kBAAkB,UACvB,KACE,UAAU,gSAmBX,IAAA"}

package/dist/autocomplete.js

@@ -1,27 +1,17 @@
 "use client";
 import { n as _getArrayProp, o as EMPTY_ARRAY, s as EMPTY_RECORD } from "./helpers-C8xxXAQC.js";
-import { d as focusFirstDescendant, l as _hasFocus, m as _raf, t as TextInput } from "./textInput-B6ZZJSOj.js";
+import { f as focusFirstDescendant, h as _raf, t as TextInput, u as _hasFocus } from "./textInput-DAaORuky.js";
 import { t as _isEnterToClickElement } from "./element-BYgCE_iK.js";
-import { s as Card, y as Box } from "./useLayer-jUJIz8mh.js";
-import { n as Text, t as Stack } from "./stack-BGFEokua.js";
-import { t as Button } from "./button-DQH2KIbq.js";
-import { t as Popover } from "./popover-CEbjxiPx.js";
+import { s as Card, y as Box } from "./useLayer-D1usxIE0.js";
+import { n as Text, t as Stack } from "./stack-rsNFPq2-.js";
+import { t as Button } from "./button-Dh_M2fYx.js";
+import { t as Popover } from "./popover-myCXZV_F.js";
 import { c } from "react/compiler-runtime";
 import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
 import { SpinnerIcon } from "@sanity/icons/Spinner";
+import { clsx } from "clsx/lite";
 import { cloneElement, startTransition, useEffect, useImperativeHandle, useReducer, useRef, useState } from "react";
-import { styled } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-/**
-* @internal
-*/
-const StyledAutocomplete = styled.div.withConfig({
-	displayName: "StyledAutocomplete",
-	componentId: "sc-dc0p49-0"
-})`line-height:0;`, ListBox = styled(Box).withConfig({
-	displayName: "ListBox",
-	componentId: "sc-dc0p49-1"
-})`& > ul{list-style:none;padding:0;margin:0;}`;
 function AutocompleteOption(props) {
 	let $ = c(11), { children, id, onSelect, selected, value } = props, t0;
 	$[0] !== onSelect || $[1] !== value ? (t0 = () => {
@@ -101,7 +91,9 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
 	"Meta",
 	"Tab",
 	"CapsLock"
-], AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
+], AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"];
+var autocomplete = "_4c0fmk0", autocompleteListBox = "_4c0fmk1";
+const DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
 /**
 * The Autocomplete component is typically used for search components.
 * It consists of a text input for writing a query, and properties for rendering suggestions.
@@ -109,7 +101,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
 * @public
 */
 function Autocomplete(props) {
-	let $ = c(184), customValidity, disabled, filterOptionProp, forwardedRef, icon, id, loading, onBlur, onChange, onFocus, onQueryChange, onSelect, openButton, openOnFocus, optionsProp, prefix, readOnly, relatedElements, renderOptionProp, renderPopover, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, valueProp;
+	let $ = c(187), customValidity, disabled, filterOptionProp, forwardedRef, icon, id, loading, onBlur, onChange, onFocus, onQueryChange, onSelect, openButton, openOnFocus, optionsProp, prefix, readOnly, relatedElements, renderOptionProp, renderPopover, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, valueProp;
 	$[0] === props ? (customValidity = $[1], disabled = $[2], filterOptionProp = $[3], forwardedRef = $[4], icon = $[5], id = $[6], loading = $[7], onBlur = $[8], onChange = $[9], onFocus = $[10], onQueryChange = $[11], onSelect = $[12], openButton = $[13], openOnFocus = $[14], optionsProp = $[15], prefix = $[16], readOnly = $[17], relatedElements = $[18], renderOptionProp = $[19], renderPopover = $[20], restProps = $[21], suffix = $[22], t0 = $[23], t1 = $[24], t2 = $[25], t3 = $[26], t4 = $[27], t5 = $[28], t6 = $[29], valueProp = $[30]) : ({border: t0, customValidity, disabled, filterOption: filterOptionProp, fontSize: t1, icon, id, listBox: t2, loading, onBlur, onChange, onFocus, onQueryChange, onSelect, openButton, openOnFocus, options: optionsProp, padding: t3, popover: t4, prefix, radius: t5, readOnly, ref: forwardedRef, relatedElements, renderOption: renderOptionProp, renderPopover, renderValue: t6, suffix, value: valueProp, ...restProps} = props, $[0] = props, $[1] = customValidity, $[2] = disabled, $[3] = filterOptionProp, $[4] = forwardedRef, $[5] = icon, $[6] = id, $[7] = loading, $[8] = onBlur, $[9] = onChange, $[10] = onFocus, $[11] = onQueryChange, $[12] = onSelect, $[13] = openButton, $[14] = openOnFocus, $[15] = optionsProp, $[16] = prefix, $[17] = readOnly, $[18] = relatedElements, $[19] = renderOptionProp, $[20] = renderPopover, $[21] = restProps, $[22] = suffix, $[23] = t0, $[24] = t1, $[25] = t2, $[26] = t3, $[27] = t4, $[28] = t5, $[29] = t6, $[30] = valueProp);
 	let border = t0 === void 0 || t0, fontSize = t1 === void 0 ? 2 : t1, listBox = t2 === void 0 ? EMPTY_RECORD : t2, paddingProp = t3 === void 0 ? 3 : t3, popover = t4 === void 0 ? EMPTY_RECORD : t4, radius = t5 === void 0 ? 2 : t5, renderValue = t6 === void 0 ? DEFAULT_RENDER_VALUE : t6, t7 = valueProp || null, t8 = valueProp || null, t9;
 	$[31] !== t7 || $[32] !== t8 ? (t9 = {
@@ -333,10 +325,12 @@ function Autocomplete(props) {
 			t40 = null;
 			break bb2;
 		}
-		let t41;
-		if ($[115] !== activeValue || $[116] !== currentOption || $[117] !== filteredOptions || $[118] !== handleOptionSelect || $[119] !== id || $[120] !== listFocused || $[121] !== loading || $[122] !== renderOption) {
-			let t42;
-			$[124] !== activeValue || $[125] !== currentOption || $[126] !== handleOptionSelect || $[127] !== id || $[128] !== listFocused || $[129] !== loading || $[130] !== renderOption ? (t42 = (option_0) => {
+		let t41 = listBox?.className, t42;
+		$[115] === t41 ? t42 = $[116] : (t42 = clsx(autocompleteListBox, t41), $[115] = t41, $[116] = t42);
+		let t43;
+		if ($[117] !== activeValue || $[118] !== currentOption || $[119] !== filteredOptions || $[120] !== handleOptionSelect || $[121] !== id || $[122] !== listFocused || $[123] !== loading || $[124] !== renderOption) {
+			let t44;
+			$[126] !== activeValue || $[127] !== currentOption || $[128] !== handleOptionSelect || $[129] !== id || $[130] !== listFocused || $[131] !== loading || $[132] !== renderOption ? (t44 = (option_0) => {
 				let active = activeValue === null ? currentOption === option_0 : option_0.value === activeValue;
 				return /* @__PURE__ */ jsx(AutocompleteOption, {
 					id: `${id}-option-${option_0.value}`,
@@ -349,10 +343,10 @@ function Autocomplete(props) {
 						tabIndex: listFocused && active ? 0 : -1
 					})
 				}, option_0.value);
-			}, $[124] = activeValue, $[125] = currentOption, $[126] = handleOptionSelect, $[127] = id, $[128] = listFocused, $[129] = loading, $[130] = renderOption, $[131] = t42) : t42 = $[131], t41 = filteredOptions.map(t42), $[115] = activeValue, $[116] = currentOption, $[117] = filteredOptions, $[118] = handleOptionSelect, $[119] = id, $[120] = listFocused, $[121] = loading, $[122] = renderOption, $[123] = t41;
-		} else t41 = $[123];
-		let t42;
-		$[132] !== listBoxId || $[133] !== t41 ? (t42 = /* @__PURE__ */ jsx(Stack, {
+			}, $[126] = activeValue, $[127] = currentOption, $[128] = handleOptionSelect, $[129] = id, $[130] = listFocused, $[131] = loading, $[132] = renderOption, $[133] = t44) : t44 = $[133], t43 = filteredOptions.map(t44), $[117] = activeValue, $[118] = currentOption, $[119] = filteredOptions, $[120] = handleOptionSelect, $[121] = id, $[122] = listFocused, $[123] = loading, $[124] = renderOption, $[125] = t43;
+		} else t43 = $[125];
+		let t44;
+		$[134] !== listBoxId || $[135] !== t43 ? (t44 = /* @__PURE__ */ jsx(Stack, {
 			as: "ul",
 			"aria-multiselectable": !1,
 			"data-ui": "AutoComplete__resultsList",
@@ -360,23 +354,24 @@ function Autocomplete(props) {
 			ref: listBoxElementRef,
 			role: "listbox",
 			gap: 1,
-			children: t41
-		}), $[132] = listBoxId, $[133] = t41, $[134] = t42) : t42 = $[134];
-		let t43;
-		$[135] !== handleListBoxKeyDown || $[136] !== listBox || $[137] !== t42 ? (t43 = /* @__PURE__ */ jsx(ListBox, {
+			children: t43
+		}), $[134] = listBoxId, $[135] = t43, $[136] = t44) : t44 = $[136];
+		let t45;
+		$[137] !== handleListBoxKeyDown || $[138] !== listBox || $[139] !== t42 || $[140] !== t44 ? (t45 = /* @__PURE__ */ jsx(Box, {
 			"data-ui": "AutoComplete__results",
 			onKeyDown: handleListBoxKeyDown,
 			padding: 1,
 			...listBox,
+			className: t42,
 			tabIndex: -1,
-			children: t42
-		}), $[135] = handleListBoxKeyDown, $[136] = listBox, $[137] = t42, $[138] = t43) : t43 = $[138], t40 = t43;
+			children: t44
+		}), $[137] = handleListBoxKeyDown, $[138] = listBox, $[139] = t42, $[140] = t44, $[141] = t45) : t45 = $[141], t40 = t45;
 	}
 	let content = t40, t41;
 	bb3: {
 		if (renderPopover) {
 			let t42 = !expanded, t43;
-			$[139] !== content || $[140] !== handlePopoverMouseEnter || $[141] !== handlePopoverMouseLeave || $[142] !== inputElement || $[143] !== renderPopover || $[144] !== t42 ? (t43 = /* @__PURE__ */ jsx(RenderPopover, {
+			$[142] !== content || $[143] !== handlePopoverMouseEnter || $[144] !== handlePopoverMouseLeave || $[145] !== inputElement || $[146] !== renderPopover || $[147] !== t42 ? (t43 = /* @__PURE__ */ jsx(RenderPopover, {
 				content,
 				hidden: t42,
 				inputElement,
@@ -384,7 +379,7 @@ function Autocomplete(props) {
 				onMouseLeave: handlePopoverMouseLeave,
 				resultsPopoverElementRef,
 				renderPopover
-			}), $[139] = content, $[140] = handlePopoverMouseEnter, $[141] = handlePopoverMouseLeave, $[142] = inputElement, $[143] = renderPopover, $[144] = t42, $[145] = t43) : t43 = $[145], t41 = t43;
+			}), $[142] = content, $[143] = handlePopoverMouseEnter, $[144] = handlePopoverMouseLeave, $[145] = inputElement, $[146] = renderPopover, $[147] = t42, $[148] = t43) : t43 = $[148], t41 = t43;
 			break bb3;
 		}
 		if (filteredOptionsLen === 0) {
@@ -392,7 +387,7 @@ function Autocomplete(props) {
 			break bb3;
 		}
 		let t42;
-		$[146] !== content || $[147] !== expanded || $[148] !== handlePopoverMouseEnter || $[149] !== handlePopoverMouseLeave || $[150] !== inputElement || $[151] !== popover || $[152] !== radius ? (t42 = /* @__PURE__ */ jsx(Popover, {
+		$[149] !== content || $[150] !== expanded || $[151] !== handlePopoverMouseEnter || $[152] !== handlePopoverMouseLeave || $[153] !== inputElement || $[154] !== popover || $[155] !== radius ? (t42 = /* @__PURE__ */ jsx(Popover, {
 			arrow: !1,
 			constrainSize: !0,
 			content,
@@ -408,12 +403,12 @@ function Autocomplete(props) {
 			ref: resultsPopoverElementRef,
 			referenceElement: inputElement,
 			...popover
-		}), $[146] = content, $[147] = expanded, $[148] = handlePopoverMouseEnter, $[149] = handlePopoverMouseLeave, $[150] = inputElement, $[151] = popover, $[152] = radius, $[153] = t42) : t42 = $[153], t41 = t42;
+		}), $[149] = content, $[150] = expanded, $[151] = handlePopoverMouseEnter, $[152] = handlePopoverMouseLeave, $[153] = inputElement, $[154] = popover, $[155] = radius, $[156] = t42) : t42 = $[156], t41 = t42;
 	}
 	let results = t41, t42;
-	$[154] === loading ? t42 = $[155] : (t42 = loading && /* @__PURE__ */ jsx(SpinnerIcon, { className: "_1b6o2se1" }), $[154] = loading, $[155] = t42);
+	$[157] === loading ? t42 = $[158] : (t42 = loading && /* @__PURE__ */ jsx(SpinnerIcon, { className: "_1b6o2se1" }), $[157] = loading, $[158] = t42);
 	let t43 = suffix || openButtonNode, t44;
-	$[156] !== activeItemId || $[157] !== border || $[158] !== clearButton || $[159] !== customValidity || $[160] !== disabled || $[161] !== expanded || $[162] !== fontSize || $[163] !== handleClearButtonClick || $[164] !== handleInputChange || $[165] !== handleInputFocus || $[166] !== icon || $[167] !== id || $[168] !== inputValue || $[169] !== listBoxId || $[170] !== padding || $[171] !== prefix || $[172] !== radius || $[173] !== readOnly || $[174] !== restProps || $[175] !== t42 || $[176] !== t43 ? (t44 = /* @__PURE__ */ jsx(TextInput, {
+	$[159] !== activeItemId || $[160] !== border || $[161] !== clearButton || $[162] !== customValidity || $[163] !== disabled || $[164] !== expanded || $[165] !== fontSize || $[166] !== handleClearButtonClick || $[167] !== handleInputChange || $[168] !== handleInputFocus || $[169] !== icon || $[170] !== id || $[171] !== inputValue || $[172] !== listBoxId || $[173] !== padding || $[174] !== prefix || $[175] !== radius || $[176] !== readOnly || $[177] !== restProps || $[178] !== t42 || $[179] !== t43 ? (t44 = /* @__PURE__ */ jsx(TextInput, {
 		...restProps,
 		"aria-activedescendant": activeItemId,
 		"aria-autocomplete": "list",
@@ -443,16 +438,17 @@ function Autocomplete(props) {
 		spellCheck: !1,
 		suffix: t43,
 		value: inputValue
-	}), $[156] = activeItemId, $[157] = border, $[158] = clearButton, $[159] = customValidity, $[160] = disabled, $[161] = expanded, $[162] = fontSize, $[163] = handleClearButtonClick, $[164] = handleInputChange, $[165] = handleInputFocus, $[166] = icon, $[167] = id, $[168] = inputValue, $[169] = listBoxId, $[170] = padding, $[171] = prefix, $[172] = radius, $[173] = readOnly, $[174] = restProps, $[175] = t42, $[176] = t43, $[177] = t44) : t44 = $[177];
+	}), $[159] = activeItemId, $[160] = border, $[161] = clearButton, $[162] = customValidity, $[163] = disabled, $[164] = expanded, $[165] = fontSize, $[166] = handleClearButtonClick, $[167] = handleInputChange, $[168] = handleInputFocus, $[169] = icon, $[170] = id, $[171] = inputValue, $[172] = listBoxId, $[173] = padding, $[174] = prefix, $[175] = radius, $[176] = readOnly, $[177] = restProps, $[178] = t42, $[179] = t43, $[180] = t44) : t44 = $[180];
 	let t45;
-	return $[178] !== handleRootBlur || $[179] !== handleRootFocus || $[180] !== handleRootKeyDown || $[181] !== results || $[182] !== t44 ? (t45 = /* @__PURE__ */ jsxs(StyledAutocomplete, {
+	return $[181] !== handleRootBlur || $[182] !== handleRootFocus || $[183] !== handleRootKeyDown || $[184] !== results || $[185] !== t44 ? (t45 = /* @__PURE__ */ jsxs("div", {
+		className: autocomplete,
 		"data-ui": "Autocomplete",
 		onBlur: handleRootBlur,
 		onFocus: handleRootFocus,
 		onKeyDown: handleRootKeyDown,
 		ref: rootElementRef,
 		children: [t44, results]
-	}), $[178] = handleRootBlur, $[179] = handleRootFocus, $[180] = handleRootKeyDown, $[181] = results, $[182] = t44, $[183] = t45) : t45 = $[183], t45;
+	}), $[181] = handleRootBlur, $[182] = handleRootFocus, $[183] = handleRootKeyDown, $[184] = results, $[185] = t44, $[186] = t45) : t45 = $[186], t45;
 }
 function _temp2(v_1) {
 	return Math.max(v_1 - 1, 0);