@veracity/vui 3.0.0-beta.8 → 3.0.0

package/dist/range/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/range/theme.ts"],"sourcesContent":["import { rangeColors } from './consts'\n\nconst baseStyle = {\n  container: {\n    w: 1,\n  },\n  thumb: {\n    bg: 'white',\n    border: `2px solid ${rangeColors.main}`,\n    borderRadius: '24px',\n    cursor: 'grab',\n    h: '24px',\n    lineHeight: '24px',\n    w: '24px',\n    textAlign: 'center',\n    top: '-10px',\n    transitionDuration: '0s',\n  },\n  thumbValue: {\n    position: 'absolute',\n    top: '24px',\n    w: '18px',\n  },\n  track: {\n    bg: rangeColors.main,\n    bottom: 0,\n    borderRadius: '24px',\n    top: 0,\n    transitionDuration: '0s',\n  },\n}\n\nconst defaultProps = {}\n\nconst parts = ['container', 'thumb', 'thumbValue', 'track']\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"0CAwCA,IAAA,EAAe,CACb,UAvCgB,CAChB,UAAW,CACT,EAAG,EACJ,CACD,MAAO,CACL,GAAI,QACJ,OAAQ,aAAa,EAAY,OACjC,aAAc,OACd,OAAQ,OACR,EAAG,OACH,WAAY,OACZ,EAAG,OACH,UAAW,SACX,IAAK,QACL,mBAAoB,KACrB,CACD,WAAY,CACV,SAAU,WACV,IAAK,OACL,EAAG,OACJ,CACD,MAAO,CACL,GAAI,EAAY,KAChB,OAAQ,EACR,aAAc,OACd,IAAK,EACL,mBAAoB,KACrB,CACF,CAYC,aAVmB,EAAE,CAWrB,MATY,CAAC,YAAa,QAAS,aAAc,QAAQ,CAUzD,MARY,EAAE,CASd,SAPe,EAAE,CAQlB"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/range/theme.ts"],"sourcesContent":["import { rangeColors } from './consts'\n\nconst baseStyle = {\n  container: {\n    w: 1,\n  },\n  thumb: {\n    bg: 'white',\n    border: `2px solid ${rangeColors.main}`,\n    borderRadius: '24px',\n    cursor: 'grab',\n    h: '24px',\n    lineHeight: '24px',\n    w: '24px',\n    textAlign: 'center',\n    top: '-10px',\n    transitionDuration: '0s',\n  },\n  thumbValue: {\n    position: 'absolute',\n    top: '24px',\n    w: '18px',\n  },\n  track: {\n    bg: rangeColors.main,\n    bottom: 0,\n    borderRadius: '24px',\n    top: 0,\n    transitionDuration: '0s',\n  },\n}\n\nconst defaultProps = {}\n\nconst parts = ['container', 'thumb', 'thumbValue', 'track']\n\nconst sizes = {}\n\nconst variants = {}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;;AAEA,MAAM,YAAY;CAChB,WAAW,EACT,GAAG,GACJ;CACD,OAAO;EACL,IAAI;EACJ,QAAQ,aAAa,YAAY;EACjC,cAAc;EACd,QAAQ;EACR,GAAG;EACH,YAAY;EACZ,GAAG;EACH,WAAW;EACX,KAAK;EACL,oBAAoB;EACrB;CACD,YAAY;EACV,UAAU;EACV,KAAK;EACL,GAAG;EACJ;CACD,OAAO;EACL,IAAI,YAAY;EAChB,QAAQ;EACR,cAAc;EACd,KAAK;EACL,oBAAoB;EACrB;CACF;AAED,MAAM,eAAe,EAAE;AAEvB,MAAM,QAAQ;CAAC;CAAa;CAAS;CAAc;CAAQ;AAE3D,MAAM,QAAQ,EAAE;AAEhB,MAAM,WAAW,EAAE;AAEnB,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/rating/index.d.ts

@@ -0,0 +1 @@
+import { Rating } from "./rating.js";

package/dist/rating/rating.d.ts

@@ -1,5 +1,6 @@
 import { VuiComponent } from "../core/vui.js";
 import { RatingProps } from "./rating.types.js";
+import "../index.js";
 
 //#region src/rating/rating.d.ts
 declare const Rating: VuiComponent<"div", RatingProps>;

package/dist/rating/rating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rating.d.ts","names":[],"sources":["../../src/rating/rating.tsx"],"sourcesContent":[],"mappings":";;;;cAYa,QAAM,oBAAA"}
+{"version":3,"file":"rating.d.ts","names":[],"sources":["../../src/rating/rating.tsx"],"sourcesContent":[],"mappings":";;;;;cAYa,QAAM,oBAAA"}

package/dist/rating/rating.js

@@ -1,2 +1,128 @@
-import{mergeRefs as e}from"../utils/react.js";import t from"./theme.js";import{vui as n}from"../core/vui.js";import r from"../box/box.js";import i from"../icon/icon.js";import{useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=n((n,i)=>{let{value:c=0,isDisabled:d=!1,max:f,onChange:p,showAll:m=!0,variant:h=`yellow`,size:g,..._}=n,[v,y]=o(null),[b,x]=o(c||0),[S,C]=o(null),w=a(null),T=!d&&p!==void 0,E=m||T,{variants:D}=t??{},O=d?`sandstone.79`:D[h].color;c<0&&console.error(`Rating: value (${c}) cannot be negative`);let k=Math.max(0,c),A=f||Math.max(k,5);k>A&&console.error(`Rating: value (${k}) cannot be greater than max (${A})`);let j=e=>{if(!T)return;let t=Math.max(0,Math.min(e,A));x(t),p?.(t)},M=e=>{T&&j(e===b?0:e)},N=e=>{T&&y(e)},P=()=>{T&&y(null)},F=e=>{if(!T)return;let t=c===void 0?b:c;switch(e.key){case`ArrowRight`:case`ArrowUp`:e.preventDefault(),j(Math.min(t+1,A));break;case`ArrowLeft`:case`ArrowDown`:e.preventDefault(),j(Math.max(t-1,0));break;case`Home`:e.preventDefault(),j(0);break;case`End`:e.preventDefault(),j(A);break}},I=()=>{T&&S===null&&C(c===void 0?b:c)},L=()=>{T&&C(null)},R=v===null?k===void 0?b:k:v;return s(r,{"aria-label":`Rating`,"aria-valuemax":A,"aria-valuemin":0,"aria-valuenow":R,className:`vui-rating`,focusRing:3,focusRingColor:`focusColor`,onBlur:L,onFocus:I,onKeyDown:F,onMouseLeave:P,outline:`none`,ref:e(i,w),role:`slider`,tabIndex:T?0:-1,..._,children:Array.from({length:A}).map((e,t)=>{let n=t+1;return s(r,{className:`vui-rating-star`,cursor:T?`pointer`:void 0,gap:`1px`,onClick:()=>M(n),onFocus:()=>C(n),onMouseEnter:()=>N(n),tabIndex:-1,children:t<R?s(l,{color:O,size:g}):E?s(u,{color:`sandstone.79`,size:g}):null},t)})})}),l=e=>s(i,{color:e.color,name:`uiStar`,size:e.size}),u=e=>s(i,{color:e.color,name:`uiStar`,size:e.size});c.displayName=`Rating`;export{c as Rating};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { mergeRefs } from "../utils/react.js";
+import theme_default from "./theme.js";
+import { vui } from "../core/vui.js";
+import box_default from "../box/box.js";
+import icon_default from "../icon/icon.js";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/rating/rating.tsx
+const Rating = vui((props, ref) => {
+	const { value: propValue = 0, isDisabled = false, max: propMax, onChange, showAll: showAllProp = true, variant = "yellow", size,...rest } = props;
+	const [hoverValue, setHoverValue] = useState(null);
+	const [internalValue, setInternalValue] = useState(propValue || 0);
+	const [focusedStar, setFocusedStar] = useState(null);
+	const containerRef = useRef(null);
+	const isInteractive = !isDisabled && onChange !== void 0;
+	const showAll = showAllProp || isInteractive;
+	const { variants } = theme_default ?? {};
+	const color = isDisabled ? "sandstone.79" : variants[variant].color;
+	if (propValue < 0) console.error(`Rating: value (${propValue}) cannot be negative`);
+	const value = Math.max(0, propValue);
+	const max = propMax ? propMax : Math.max(value, 5);
+	if (value > max) console.error(`Rating: value (${value}) cannot be greater than max (${max})`);
+	const handleValueChange = (newValue) => {
+		if (!isInteractive) return;
+		const clampedValue = Math.max(0, Math.min(newValue, max));
+		setInternalValue(clampedValue);
+		onChange?.(clampedValue);
+	};
+	const handleStarClick = (clickedValue) => {
+		if (!isInteractive) return;
+		handleValueChange(clickedValue === internalValue ? 0 : clickedValue);
+	};
+	const handleStarHover = (hoveredValue) => {
+		if (!isInteractive) return;
+		setHoverValue(hoveredValue);
+	};
+	const handleMouseLeave = () => {
+		if (!isInteractive) return;
+		setHoverValue(null);
+	};
+	const handleKeyDown = (event) => {
+		if (!isInteractive) return;
+		const currentValue = propValue !== void 0 ? propValue : internalValue;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				event.preventDefault();
+				handleValueChange(Math.min(currentValue + 1, max));
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				event.preventDefault();
+				handleValueChange(Math.max(currentValue - 1, 0));
+				break;
+			case "Home":
+				event.preventDefault();
+				handleValueChange(0);
+				break;
+			case "End":
+				event.preventDefault();
+				handleValueChange(max);
+				break;
+		}
+	};
+	const handleFocus = () => {
+		if (!isInteractive) return;
+		if (focusedStar === null) setFocusedStar(propValue !== void 0 ? propValue : internalValue);
+	};
+	const handleBlur = () => {
+		if (!isInteractive) return;
+		setFocusedStar(null);
+	};
+	const displayValue = hoverValue !== null ? hoverValue : value !== void 0 ? value : internalValue;
+	return /* @__PURE__ */ jsx(box_default, {
+		"aria-label": "Rating",
+		"aria-valuemax": max,
+		"aria-valuemin": 0,
+		"aria-valuenow": displayValue,
+		className: "vui-rating",
+		focusRing: 3,
+		focusRingColor: "focusColor",
+		onBlur: handleBlur,
+		onFocus: handleFocus,
+		onKeyDown: handleKeyDown,
+		onMouseLeave: handleMouseLeave,
+		outline: "none",
+		ref: mergeRefs(ref, containerRef),
+		role: "slider",
+		tabIndex: isInteractive ? 0 : -1,
+		...rest,
+		children: Array.from({ length: max }).map((_, index) => {
+			const starValue = index + 1;
+			return /* @__PURE__ */ jsx(box_default, {
+				className: "vui-rating-star",
+				cursor: isInteractive ? "pointer" : void 0,
+				gap: "1px",
+				onClick: () => handleStarClick(starValue),
+				onFocus: () => setFocusedStar(starValue),
+				onMouseEnter: () => handleStarHover(starValue),
+				tabIndex: -1,
+				children: index < displayValue ? /* @__PURE__ */ jsx(FullStar, {
+					color,
+					size
+				}) : showAll ? /* @__PURE__ */ jsx(EmptyStar, {
+					color: "sandstone.79",
+					size
+				}) : null
+			}, index);
+		})
+	});
+});
+const FullStar = (props) => /* @__PURE__ */ jsx(icon_default, {
+	color: props.color,
+	name: "uiStar",
+	size: props.size
+});
+const EmptyStar = (props) => /* @__PURE__ */ jsx(icon_default, {
+	color: props.color,
+	name: "uiStar",
+	size: props.size
+});
+Rating.displayName = "Rating";
+
+//#endregion
+export { Rating };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=rating.js.map

package/dist/rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":["theme","Box","Icon"],"sources":["../../src/rating/rating.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react'\nimport { useRef, useState } from 'react'\n\nimport Box from '../box'\nimport { vui } from '../core'\nimport Icon from '../icon'\nimport type { ColorGetter } from '../system'\nimport type { Dict } from '../utils'\nimport { mergeRefs } from '../utils'\nimport type { RatingProps } from './rating.types'\nimport theme from './theme'\n\nexport const Rating = vui<'div', RatingProps>((props, ref) => {\n  const {\n    value: propValue = 0,\n    isDisabled = false,\n    max: propMax,\n    onChange,\n    showAll: showAllProp = true,\n    variant = 'yellow',\n    size,\n    ...rest\n  } = props\n  const [hoverValue, setHoverValue] = useState<number | null>(null)\n  const [internalValue, setInternalValue] = useState(propValue || 0)\n  const [focusedStar, setFocusedStar] = useState<number | null>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const isInteractive = !isDisabled && onChange !== undefined\n  const showAll = showAllProp || isInteractive\n\n  const { variants } = (theme as Dict) ?? {}\n  const color = isDisabled ? 'sandstone.79' : variants[variant].color\n\n  if (propValue < 0) {\n    console.error(`Rating: value (${propValue}) cannot be negative`)\n  }\n\n  const value = Math.max(0, propValue)\n  const max = propMax ? propMax : Math.max(value, 5)\n\n  if (value > max) {\n    console.error(`Rating: value (${value}) cannot be greater than max (${max})`)\n  }\n\n  const handleValueChange = (newValue: number) => {\n    if (!isInteractive) return\n    const clampedValue = Math.max(0, Math.min(newValue, max))\n    setInternalValue(clampedValue)\n    onChange?.(clampedValue)\n  }\n\n  const handleStarClick = (clickedValue: number) => {\n    if (!isInteractive) return\n    const newValue = clickedValue === internalValue ? 0 : clickedValue\n    handleValueChange(newValue)\n  }\n\n  const handleStarHover = (hoveredValue: number) => {\n    if (!isInteractive) return\n    setHoverValue(hoveredValue)\n  }\n\n  const handleMouseLeave = () => {\n    if (!isInteractive) return\n    setHoverValue(null)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n    const currentValue = propValue !== undefined ? propValue : internalValue\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        handleValueChange(Math.min(currentValue + 1, max))\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        handleValueChange(Math.max(currentValue - 1, 0))\n        break\n      case 'Home':\n        event.preventDefault()\n        handleValueChange(0)\n        break\n      case 'End':\n        event.preventDefault()\n        handleValueChange(max)\n        break\n    }\n  }\n\n  const handleFocus = () => {\n    if (!isInteractive) return\n    if (focusedStar === null) {\n      setFocusedStar(propValue !== undefined ? propValue : internalValue)\n    }\n  }\n\n  const handleBlur = () => {\n    if (!isInteractive) return\n    setFocusedStar(null)\n  }\n\n  const displayValue = hoverValue !== null ? hoverValue : value !== undefined ? value : internalValue\n\n  return (\n    <Box\n      aria-label=\"Rating\"\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={displayValue}\n      className=\"vui-rating\"\n      focusRing={3}\n      focusRingColor=\"focusColor\"\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseLeave={handleMouseLeave}\n      outline=\"none\"\n      ref={mergeRefs(ref, containerRef)}\n      role=\"slider\"\n      tabIndex={isInteractive ? 0 : -1}\n      {...rest}\n    >\n      {Array.from({ length: max }).map((_, index) => {\n        const starValue = index + 1\n        const fullStar = index < displayValue\n        return (\n          <Box\n            className=\"vui-rating-star\"\n            cursor={isInteractive ? 'pointer' : undefined}\n            gap=\"1px\"\n            key={index}\n            onClick={() => handleStarClick(starValue)}\n            onFocus={() => setFocusedStar(starValue)}\n            onMouseEnter={() => handleStarHover(starValue)}\n            tabIndex={-1}\n          >\n            {fullStar ? (\n              <FullStar color={color} size={size} />\n            ) : showAll ? (\n              <EmptyStar color=\"sandstone.79\" size={size} />\n            ) : null}\n          </Box>\n        )\n      })}\n    </Box>\n  )\n})\n\nconst FullStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\nconst EmptyStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\n\nRating.displayName = 'Rating'\nexport default Rating\n"],"mappings":"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"}
+{"version":3,"file":"rating.js","names":["theme","Box","Icon"],"sources":["../../src/rating/rating.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react'\nimport { useRef, useState } from 'react'\n\nimport Box from '../box'\nimport { vui } from '../core'\nimport Icon from '../icon'\nimport type { ColorGetter } from '../system'\nimport type { Dict } from '../utils'\nimport { mergeRefs } from '../utils'\nimport type { RatingProps } from './rating.types'\nimport theme from './theme'\n\nexport const Rating = vui<'div', RatingProps>((props, ref) => {\n  const {\n    value: propValue = 0,\n    isDisabled = false,\n    max: propMax,\n    onChange,\n    showAll: showAllProp = true,\n    variant = 'yellow',\n    size,\n    ...rest\n  } = props\n  const [hoverValue, setHoverValue] = useState<number | null>(null)\n  const [internalValue, setInternalValue] = useState(propValue || 0)\n  const [focusedStar, setFocusedStar] = useState<number | null>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const isInteractive = !isDisabled && onChange !== undefined\n  const showAll = showAllProp || isInteractive\n\n  const { variants } = (theme as Dict) ?? {}\n  const color = isDisabled ? 'sandstone.79' : variants[variant].color\n\n  if (propValue < 0) {\n    console.error(`Rating: value (${propValue}) cannot be negative`)\n  }\n\n  const value = Math.max(0, propValue)\n  const max = propMax ? propMax : Math.max(value, 5)\n\n  if (value > max) {\n    console.error(`Rating: value (${value}) cannot be greater than max (${max})`)\n  }\n\n  const handleValueChange = (newValue: number) => {\n    if (!isInteractive) return\n    const clampedValue = Math.max(0, Math.min(newValue, max))\n    setInternalValue(clampedValue)\n    onChange?.(clampedValue)\n  }\n\n  const handleStarClick = (clickedValue: number) => {\n    if (!isInteractive) return\n    const newValue = clickedValue === internalValue ? 0 : clickedValue\n    handleValueChange(newValue)\n  }\n\n  const handleStarHover = (hoveredValue: number) => {\n    if (!isInteractive) return\n    setHoverValue(hoveredValue)\n  }\n\n  const handleMouseLeave = () => {\n    if (!isInteractive) return\n    setHoverValue(null)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n    const currentValue = propValue !== undefined ? propValue : internalValue\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        handleValueChange(Math.min(currentValue + 1, max))\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        handleValueChange(Math.max(currentValue - 1, 0))\n        break\n      case 'Home':\n        event.preventDefault()\n        handleValueChange(0)\n        break\n      case 'End':\n        event.preventDefault()\n        handleValueChange(max)\n        break\n    }\n  }\n\n  const handleFocus = () => {\n    if (!isInteractive) return\n    if (focusedStar === null) {\n      setFocusedStar(propValue !== undefined ? propValue : internalValue)\n    }\n  }\n\n  const handleBlur = () => {\n    if (!isInteractive) return\n    setFocusedStar(null)\n  }\n\n  const displayValue = hoverValue !== null ? hoverValue : value !== undefined ? value : internalValue\n\n  return (\n    <Box\n      aria-label=\"Rating\"\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={displayValue}\n      className=\"vui-rating\"\n      focusRing={3}\n      focusRingColor=\"focusColor\"\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseLeave={handleMouseLeave}\n      outline=\"none\"\n      ref={mergeRefs(ref, containerRef)}\n      role=\"slider\"\n      tabIndex={isInteractive ? 0 : -1}\n      {...rest}\n    >\n      {Array.from({ length: max }).map((_, index) => {\n        const starValue = index + 1\n        const fullStar = index < displayValue\n        return (\n          <Box\n            className=\"vui-rating-star\"\n            cursor={isInteractive ? 'pointer' : undefined}\n            gap=\"1px\"\n            key={index}\n            onClick={() => handleStarClick(starValue)}\n            onFocus={() => setFocusedStar(starValue)}\n            onMouseEnter={() => handleStarHover(starValue)}\n            tabIndex={-1}\n          >\n            {fullStar ? (\n              <FullStar color={color} size={size} />\n            ) : showAll ? (\n              <EmptyStar color=\"sandstone.79\" size={size} />\n            ) : null}\n          </Box>\n        )\n      })}\n    </Box>\n  )\n})\n\nconst FullStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\nconst EmptyStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\n\nRating.displayName = 'Rating'\nexport default Rating\n"],"mappings":"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"}

package/dist/rating/rating.types.d.ts

@@ -1,5 +1,6 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 
 //#region src/rating/rating.types.d.ts
 type RatingProps = SystemProps & ThemingProps<'Rating'> & {

package/dist/rating/rating.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rating.types.d.ts","names":[],"sources":["../../src/rating/rating.types.ts"],"sourcesContent":[],"mappings":";;;;KAGY,WAAA,CAAA,CAAA,CAAc,cACxB;;EADU,KAAA,CAAA,CAAA,MAAA;EAAW,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,OAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA;KAAG,CAAA,CAAA,CAAA,MAAA;;EACZ,OAAA,CAAA,CAAA,CAAA,OAAA"}
+{"version":3,"file":"rating.types.d.ts","names":[],"sources":["../../src/rating/rating.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,WAAA,CAAA,CAAA,CAAc,cACxB;;;EADU,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,OAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/rating/theme.js

@@ -1,2 +1,28 @@
-var e={baseStyle:{},defaultProps:{size:`md`,variant:`yellow`},parts:[`icon`],sizes:{sm:{icon:{size:`sm`}},md:{icon:{size:`md`}},lg:{icon:{size:`lg`}}},variants:{yellow:{color:`sunflower.50`},blue:{color:`seaBlue.28`}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/rating/theme.ts
+const baseStyle = {};
+const defaultProps = {
+	size: "md",
+	variant: "yellow"
+};
+const parts = ["icon"];
+const sizes = {
+	sm: { icon: { size: "sm" } },
+	md: { icon: { size: "md" } },
+	lg: { icon: { size: "lg" } }
+};
+const variants = {
+	yellow: { color: "sunflower.50" },
+	blue: { color: "seaBlue.28" }
+};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	parts,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=theme.js.map

package/dist/rating/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/rating/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'yellow',\n}\n\nconst parts = ['icon']\n\nconst sizes = {\n  sm: {\n    icon: {\n      size: 'sm',\n    },\n  },\n  md: {\n    icon: {\n      size: 'md',\n    },\n  },\n  lg: {\n    icon: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {\n  yellow: {\n    color: 'sunflower.50',\n  },\n  blue: {\n    color: 'seaBlue.28',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"AAoCA,IAAA,EAAe,CACb,UArCgB,EAAE,CAsClB,aApCmB,CACnB,KAAM,KACN,QAAS,SACV,CAkCC,MAhCY,CAAC,OAAO,CAiCpB,MA/BY,CACZ,GAAI,CACF,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,KAAM,CACJ,KAAM,KACP,CACF,CACD,GAAI,CACF,KAAM,CACJ,KAAM,KACP,CACF,CACF,CAgBC,SAde,CACf,OAAQ,CACN,MAAO,eACR,CACD,KAAM,CACJ,MAAO,aACR,CACF,CAQA"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/rating/theme.ts"],"sourcesContent":["const baseStyle = {}\n\nconst defaultProps = {\n  size: 'md',\n  variant: 'yellow',\n}\n\nconst parts = ['icon']\n\nconst sizes = {\n  sm: {\n    icon: {\n      size: 'sm',\n    },\n  },\n  md: {\n    icon: {\n      size: 'md',\n    },\n  },\n  lg: {\n    icon: {\n      size: 'lg',\n    },\n  },\n}\n\nconst variants = {\n  yellow: {\n    color: 'sunflower.50',\n  },\n  blue: {\n    color: 'seaBlue.28',\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAAE;AAEpB,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,QAAQ,CAAC,OAAO;AAEtB,MAAM,QAAQ;CACZ,IAAI,EACF,MAAM,EACJ,MAAM,MACP,EACF;CACD,IAAI,EACF,MAAM,EACJ,MAAM,MACP,EACF;CACD,IAAI,EACF,MAAM,EACJ,MAAM,MACP,EACF;CACF;AAED,MAAM,WAAW;CACf,QAAQ,EACN,OAAO,gBACR;CACD,MAAM,EACJ,OAAO,cACR;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/select/context.js

@@ -1,2 +1,9 @@
-import{createContext as e}from"../utils/react.js";const[t,n]=e({isOptional:!0});export{t as SelectProvider,n as useSelectContext};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { createContext } from "../utils/react.js";
+
+//#region src/select/context.ts
+const [SelectProvider, useSelectContext] = createContext({ isOptional: true });
+
+//#endregion
+export { SelectProvider, useSelectContext };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=context.js.map

package/dist/select/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/select/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { SelectContext } from './select.types'\n\nconst [SelectProvider, useSelectContext] = createContext<SelectContext>({ isOptional: true })\n\nexport { SelectProvider, useSelectContext }\n"],"mappings":"kDAGA,KAAM,CAAC,EAAgB,GAAoB,EAA6B,CAAE,WAAY,GAAM,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/select/context.ts"],"sourcesContent":["import { createContext } from '../utils'\nimport type { SelectContext } from './select.types'\n\nconst [SelectProvider, useSelectContext] = createContext<SelectContext>({ isOptional: true })\n\nexport { SelectProvider, useSelectContext }\n"],"mappings":";;;AAGA,MAAM,CAAC,gBAAgB,oBAAoB,cAA6B,EAAE,YAAY,MAAM,CAAC"}

package/dist/select/index.d.ts

@@ -0,0 +1,8 @@
+import { UseSelectProps } from "./useSelect.types.js";
+import { UseSelectReturnType, getOptionText } from "./useSelect.js";
+import { SelectButtonProps, SelectContentProps, SelectContext, SelectGroupProps, SelectLabelProps, SelectOptionData, SelectOptionProps, SelectProps, SelectValue } from "./select.types.js";
+import { Select } from "./select.js";
+import { SelectButton } from "./selectButton.js";
+import { SelectContent } from "./selectContent.js";
+import { SelectGroup } from "./selectGroup.js";
+import { SelectOption } from "./selectOption.js";

package/dist/select/select.d.ts

@@ -5,6 +5,7 @@ import { ListProps } from "../list/list.types.js";
 import { ListDivider } from "../list/listDivider.js";
 import { ListHeading } from "../list/listHeading.js";
 import { SelectOptionProps, SelectProps } from "./select.types.js";
+import "../index.js";
 import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/select/select.d.ts

package/dist/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;iBAsBgB,MAAA,QAAc,cAAW,kBAAA,CAAA,GAAA,CAAA;kBAAzB,MAAA;qCAAM,WAAA;;EAAN,GAAA,CAAA,KAAM,CAAA,aAAA,CAAA,CAAA,EAAA,CAAA,CAAA,WAAA,CAAA,CAAA,CAAA;IAAA,OAAA,CAAA,CAAA,MAAA,YAAA;IAAQ,OAAA,CAAA,CAAA,MAAA,YAAA;;EAAW,GAAA,CAAA,MAAA,CAAA,aAAA,CAAA,CAAA,EAAA,CAAA,CAAA,mBAAA;EAAzB,GAAA,CAAA,WAAM,CAAA,CAAA,MAAA"}
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;iBAsBgB,MAAA,QAAc,cAAW,kBAAA,CAAA,GAAA,CAAA;kBAAzB,MAAA;qCAAM,WAAA;;;IAAN,OAAM,CAAA,CAAA,MAAA,YAAmB;IAAzB,OAAM,CAAA,CAAA,MAAA,YAAA;EAAA,CAAA"}

package/dist/select/select.js

@@ -1,2 +1,119 @@
-import{__DEV__ as e}from"../utils/consts.js";import{helpTextSize as t}from"../input/consts.js";import{Box as n}from"../box/box.js";import r from"../input/helpText.js";import i from"../popover/popover.js";import{Input as a}from"../input/input.js";import{SelectProvider as o}from"./context.js";import s from"./selectButton.js";import c from"./selectContent.js";import l from"./selectGroup.js";import u from"./selectLabel.js";import d from"./selectOption.js";import f from"./useSelect.js";import{useEffect as p,useId as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";function y(y){let{children:b,defaultValue:x,disabled:S,errorText:C,closeOnScroll:w,helpText:T,id:E,isInvalid:D,isMultiple:O,label:k,labelMarkOptional:A,labelTooltipText:j,maxHeight:M,name:N,onChange:P,options:F,matchWidth:I=!0,placeholder:L=`Please select`,selectedText:R,readOnly:z,selectButton:B,selectButtonProps:V,showOptionsFilter:H,size:U=`lg`,value:W,variant:G,...K}=y,q=f({defaultValue:x,isMultiple:O,onChange:P,value:W,options:F,selectedText:R,children:b});e&&O&&!Array.isArray(q.value)&&console.error(`<Select /> is used with isMultiple but its value is not an array: `,W);let J=m(),[Y,X]=h(``),[Z,Q]=h(F),$=E||J,ee={disabled:S,isInvalid:D,isMultiple:O,name:N,options:F,placeholder:L,selectedText:R,readOnly:z,size:U,variant:G,...q},te=e=>X(e.target.value?.toLowerCase()),ne=e=>!H||!Y?.length?!0:e?.text?.toLowerCase()?.includes(Y);return p(()=>{Q(F?.filter(ne))},[Y,F]),_(o,{value:ee,children:v(n,{className:`vui-selectContainer`,column:!0,...K,children:[!!k&&_(u,{disabled:S,id:$,label:k,labelMarkOptional:A,labelTooltipText:j}),_(i,{matchWidth:I,children:v(g,{children:[B??_(s,{...V}),v(c,{overflow:`hidden`,children:[H&&_(n,{children:_(a,{iconLeft:`uiSearch`,id:$,m:1,mt:0,onChange:te,placeholder:`Filter…`,size:U,value:Y,w:`100%`})}),_(l,{maxH:M,overflowY:`auto`,tabIndex:1e3,children:b??Z?.map?.(e=>_(d,{closeOnScroll:w,title:e.text,...e},e.value))})]})]})}),!!T&&_(r,{size:t[U],children:T}),!!C&&_(r,{isError:!0,size:t[U],children:C})]})})}y.Button=s,y.Content=c,y.Group=l,y.Option=d,y.displayName=`Select`;export{y as Select};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { __DEV__ } from "../utils/consts.js";
+import { helpTextSize } from "../input/consts.js";
+import { Box } from "../box/box.js";
+import helpText_default from "../input/helpText.js";
+import Popover from "../popover/popover.js";
+import { Input } from "../input/input.js";
+import { SelectProvider } from "./context.js";
+import selectButton_default from "./selectButton.js";
+import selectContent_default from "./selectContent.js";
+import selectGroup_default from "./selectGroup.js";
+import selectLabel_default from "./selectLabel.js";
+import selectOption_default from "./selectOption.js";
+import useSelect from "./useSelect.js";
+import { useEffect, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/select/select.tsx
+/**
+* Wraps trigger and content elements, providing them with context.
+* When no children are provided, content can be displayed based on 'options' data prop.
+* Supports single select and multi select, as well as controlled and uncontrolled modes.
+*/
+function Select(props) {
+	const { children, defaultValue, disabled, errorText, closeOnScroll, helpText, id: idProp, isInvalid, isMultiple, label, labelMarkOptional, labelTooltipText, maxHeight, name, onChange, options, matchWidth = true, placeholder = "Please select", selectedText, readOnly, selectButton, selectButtonProps, showOptionsFilter, size = "lg", value, variant,...rest } = props;
+	const selectProps = useSelect({
+		defaultValue,
+		isMultiple,
+		onChange,
+		value,
+		options,
+		selectedText,
+		children
+	});
+	if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) console.error("<Select /> is used with isMultiple but its value is not an array: ", value);
+	const generatedId = useId();
+	const [query, setQuery] = useState("");
+	const [filteredOptions, setFilteredOptions] = useState(options);
+	const id = idProp || generatedId;
+	const context = {
+		disabled,
+		isInvalid,
+		isMultiple,
+		name,
+		options,
+		placeholder,
+		selectedText,
+		readOnly,
+		size,
+		variant,
+		...selectProps
+	};
+	const onQueryChange = (e) => setQuery(e.target.value?.toLowerCase());
+	const filterOptions = (i) => !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query);
+	useEffect(() => {
+		setFilteredOptions(options?.filter(filterOptions));
+	}, [query, options]);
+	return /* @__PURE__ */ jsx(SelectProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(Box, {
+			className: "vui-selectContainer",
+			column: true,
+			...rest,
+			children: [
+				!!label && /* @__PURE__ */ jsx(selectLabel_default, {
+					disabled,
+					id,
+					label,
+					labelMarkOptional,
+					labelTooltipText
+				}),
+				/* @__PURE__ */ jsx(Popover, {
+					matchWidth,
+					children: /* @__PURE__ */ jsxs(Fragment$1, { children: [selectButton ?? /* @__PURE__ */ jsx(selectButton_default, { ...selectButtonProps }), /* @__PURE__ */ jsxs(selectContent_default, {
+						overflow: "hidden",
+						children: [showOptionsFilter && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Input, {
+							iconLeft: "uiSearch",
+							id,
+							m: 1,
+							mt: 0,
+							onChange: onQueryChange,
+							placeholder: "Filter…",
+							size,
+							value: query,
+							w: "100%"
+						}) }), /* @__PURE__ */ jsx(selectGroup_default, {
+							maxH: maxHeight,
+							overflowY: "auto",
+							tabIndex: 1e3,
+							children: children ?? filteredOptions?.map?.((option) => /* @__PURE__ */ jsx(selectOption_default, {
+								closeOnScroll,
+								title: option.text,
+								...option
+							}, option.value))
+						})]
+					})] })
+				}),
+				!!helpText && /* @__PURE__ */ jsx(helpText_default, {
+					size: helpTextSize[size],
+					children: helpText
+				}),
+				!!errorText && /* @__PURE__ */ jsx(helpText_default, {
+					isError: true,
+					size: helpTextSize[size],
+					children: errorText
+				})
+			]
+		})
+	});
+}
+Select.Button = selectButton_default;
+Select.Content = selectContent_default;
+Select.Group = selectGroup_default;
+Select.Option = selectOption_default;
+Select.displayName = "Select";
+
+//#endregion
+export { Select };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["SelectLabel","SelectButton","SelectContent","SelectGroup","SelectOption","HelpText"],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\n\nimport { Box } from '../box'\nimport { Input } from '../input'\nimport { helpTextSize } from '../input/consts'\nimport HelpText from '../input/helpText'\nimport { Popover } from '../popover'\nimport { __DEV__ } from '../utils'\nimport { SelectProvider } from './context'\nimport type { SelectOptionData, SelectProps } from './select.types'\nimport SelectButton from './selectButton'\nimport SelectContent from './selectContent'\nimport SelectGroup from './selectGroup'\nimport SelectLabel from './selectLabel'\nimport SelectOption from './selectOption'\nimport useSelect from './useSelect'\n\n/**\n * Wraps trigger and content elements, providing them with context.\n * When no children are provided, content can be displayed based on 'options' data prop.\n * Supports single select and multi select, as well as controlled and uncontrolled modes.\n */\nexport function Select(props: SelectProps) {\n  const {\n    children,\n    defaultValue,\n    disabled,\n    errorText,\n    closeOnScroll,\n    helpText,\n    id: idProp,\n    isInvalid,\n    isMultiple,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    maxHeight,\n    name,\n    onChange,\n    options,\n    matchWidth = true,\n    placeholder = 'Please select',\n    selectedText,\n    readOnly,\n    selectButton,\n    selectButtonProps,\n    showOptionsFilter,\n    size = 'lg',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, selectedText, children })\n\n  if (__DEV__ && isMultiple && !Array.isArray(selectProps.value))\n    console.error('<Select /> is used with isMultiple but its value is not an array: ', value)\n\n  const generatedId = useId()\n  const [query, setQuery] = useState<string>('')\n  const [filteredOptions, setFilteredOptions] = useState(options)\n\n  const id = idProp || generatedId\n\n  const context = {\n    disabled,\n    isInvalid,\n    isMultiple,\n    name,\n    options,\n    placeholder,\n    selectedText,\n    readOnly,\n    size,\n    variant,\n    ...selectProps,\n  }\n  const onQueryChange = (e: any) => setQuery(e.target.value?.toLowerCase())\n\n  const filterOptions = (i: SelectOptionData) =>\n    !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)\n\n  useEffect(() => {\n    setFilteredOptions(options?.filter(filterOptions))\n  }, [query, options])\n\n  return (\n    <SelectProvider value={context}>\n      <Box className=\"vui-selectContainer\" column {...rest}>\n        {!!label && (\n          <SelectLabel\n            disabled={disabled}\n            id={id}\n            label={label}\n            labelMarkOptional={labelMarkOptional}\n            labelTooltipText={labelTooltipText}\n          />\n        )}\n        <Popover matchWidth={matchWidth}>\n          <>\n            {selectButton ?? <SelectButton {...selectButtonProps} />}\n            <SelectContent overflow=\"hidden\">\n              {showOptionsFilter && (\n                <Box>\n                  <Input\n                    iconLeft=\"uiSearch\"\n                    id={id}\n                    m={1}\n                    mt={0}\n                    onChange={onQueryChange}\n                    placeholder=\"Filter…\"\n                    size={size}\n                    value={query}\n                    w=\"100%\"\n                  />\n                </Box>\n              )}\n              <SelectGroup maxH={maxHeight} overflowY=\"auto\" tabIndex={1000}>\n                {children ??\n                  filteredOptions?.map?.(option => (\n                    <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />\n                  ))}\n              </SelectGroup>\n            </SelectContent>\n          </>\n        </Popover>\n        {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n        {!!errorText && (\n          <HelpText isError size={helpTextSize[size]}>\n            {errorText}\n          </HelpText>\n        )}\n      </Box>\n    </SelectProvider>\n  )\n}\n\nSelect.Button = SelectButton\nSelect.Content = SelectContent\nSelect.Group = SelectGroup\nSelect.Option = SelectOption\nSelect.displayName = 'Select'\n\nexport default Select\n"],"mappings":"imBAsBA,SAAgB,EAAO,EAAoB,CACzC,GAAM,CACJ,WACA,eACA,WACA,YACA,gBACA,WACA,GAAI,EACJ,YACA,aACA,QACA,oBACA,mBACA,YACA,OACA,WACA,UACA,aAAa,GACb,cAAc,gBACd,eACA,WACA,eACA,oBACA,oBACA,OAAO,KACP,QACA,UACA,GAAG,GACD,EAEE,EAAc,EAAU,CAAE,eAAc,aAAY,WAAU,QAAO,UAAS,eAAc,WAAU,CAAC,CAEzG,GAAW,GAAc,CAAC,MAAM,QAAQ,EAAY,MAAM,EAC5D,QAAQ,MAAM,qEAAsE,EAAM,CAE5F,IAAM,EAAc,GAAO,CACrB,CAAC,EAAO,GAAY,EAAiB,GAAG,CACxC,CAAC,EAAiB,GAAsB,EAAS,EAAQ,CAEzD,EAAK,GAAU,EAEf,GAAU,CACd,WACA,YACA,aACA,OACA,UACA,cACA,eACA,WACA,OACA,UACA,GAAG,EACJ,CACK,GAAiB,GAAW,EAAS,EAAE,OAAO,OAAO,aAAa,CAAC,CAEnE,GAAiB,GACrB,CAAC,GAAqB,CAAC,GAAO,OAAS,GAAO,GAAG,MAAM,aAAa,EAAE,SAAS,EAAM,CAMvF,OAJA,MAAgB,CACd,EAAmB,GAAS,OAAO,GAAc,CAAC,EACjD,CAAC,EAAO,EAAQ,CAAC,CAGlB,EAAC,EAAA,CAAe,MAAO,YACrB,EAAC,EAAA,CAAI,UAAU,sBAAsB,OAAA,GAAO,GAAI,YAC7C,CAAC,CAAC,GACD,EAACA,EAAAA,CACW,WACN,KACG,QACY,oBACD,oBAClB,CAEJ,EAAC,EAAA,CAAoB,sBACnB,EAAA,EAAA,CAAA,SAAA,CACG,GAAgB,EAACC,EAAAA,CAAa,GAAI,EAAA,CAAqB,CACxD,EAACC,EAAAA,CAAc,SAAS,mBACrB,GACC,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CACC,SAAS,WACL,KACJ,EAAG,EACH,GAAI,EACJ,SAAU,GACV,YAAY,UACN,OACN,MAAO,EACP,EAAE,QACF,CAAA,CACE,CAER,EAACC,EAAAA,CAAY,KAAM,EAAW,UAAU,OAAO,SAAU,aACtD,GACC,GAAiB,MAAM,GACrB,EAACC,EAAAA,CAA4B,gBAAkC,MAAO,EAAO,KAAM,GAAI,GAAtC,EAAO,MAAyC,CACjG,EACQ,CAAA,EACA,CAAA,CAAA,CACf,EACK,CACT,CAAC,CAAC,GAAY,EAACC,EAAAA,CAAS,KAAM,EAAa,YAAQ,GAAoB,CACvE,CAAC,CAAC,GACD,EAACA,EAAAA,CAAS,QAAA,GAAQ,KAAM,EAAa,YAClC,GACQ,GAET,EACS,CAIrB,EAAO,OAASJ,EAChB,EAAO,QAAUC,EACjB,EAAO,MAAQC,EACf,EAAO,OAASC,EAChB,EAAO,YAAc"}
+{"version":3,"file":"select.js","names":["SelectLabel","SelectButton","SelectContent","SelectGroup","SelectOption","HelpText"],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\n\nimport { Box } from '../box'\nimport { Input } from '../input'\nimport { helpTextSize } from '../input/consts'\nimport HelpText from '../input/helpText'\nimport { Popover } from '../popover'\nimport { __DEV__ } from '../utils'\nimport { SelectProvider } from './context'\nimport type { SelectOptionData, SelectProps } from './select.types'\nimport SelectButton from './selectButton'\nimport SelectContent from './selectContent'\nimport SelectGroup from './selectGroup'\nimport SelectLabel from './selectLabel'\nimport SelectOption from './selectOption'\nimport useSelect from './useSelect'\n\n/**\n * Wraps trigger and content elements, providing them with context.\n * When no children are provided, content can be displayed based on 'options' data prop.\n * Supports single select and multi select, as well as controlled and uncontrolled modes.\n */\nexport function Select(props: SelectProps) {\n  const {\n    children,\n    defaultValue,\n    disabled,\n    errorText,\n    closeOnScroll,\n    helpText,\n    id: idProp,\n    isInvalid,\n    isMultiple,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    maxHeight,\n    name,\n    onChange,\n    options,\n    matchWidth = true,\n    placeholder = 'Please select',\n    selectedText,\n    readOnly,\n    selectButton,\n    selectButtonProps,\n    showOptionsFilter,\n    size = 'lg',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, selectedText, children })\n\n  if (__DEV__ && isMultiple && !Array.isArray(selectProps.value))\n    console.error('<Select /> is used with isMultiple but its value is not an array: ', value)\n\n  const generatedId = useId()\n  const [query, setQuery] = useState<string>('')\n  const [filteredOptions, setFilteredOptions] = useState(options)\n\n  const id = idProp || generatedId\n\n  const context = {\n    disabled,\n    isInvalid,\n    isMultiple,\n    name,\n    options,\n    placeholder,\n    selectedText,\n    readOnly,\n    size,\n    variant,\n    ...selectProps,\n  }\n  const onQueryChange = (e: any) => setQuery(e.target.value?.toLowerCase())\n\n  const filterOptions = (i: SelectOptionData) =>\n    !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)\n\n  useEffect(() => {\n    setFilteredOptions(options?.filter(filterOptions))\n  }, [query, options])\n\n  return (\n    <SelectProvider value={context}>\n      <Box className=\"vui-selectContainer\" column {...rest}>\n        {!!label && (\n          <SelectLabel\n            disabled={disabled}\n            id={id}\n            label={label}\n            labelMarkOptional={labelMarkOptional}\n            labelTooltipText={labelTooltipText}\n          />\n        )}\n        <Popover matchWidth={matchWidth}>\n          <>\n            {selectButton ?? <SelectButton {...selectButtonProps} />}\n            <SelectContent overflow=\"hidden\">\n              {showOptionsFilter && (\n                <Box>\n                  <Input\n                    iconLeft=\"uiSearch\"\n                    id={id}\n                    m={1}\n                    mt={0}\n                    onChange={onQueryChange}\n                    placeholder=\"Filter…\"\n                    size={size}\n                    value={query}\n                    w=\"100%\"\n                  />\n                </Box>\n              )}\n              <SelectGroup maxH={maxHeight} overflowY=\"auto\" tabIndex={1000}>\n                {children ??\n                  filteredOptions?.map?.(option => (\n                    <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />\n                  ))}\n              </SelectGroup>\n            </SelectContent>\n          </>\n        </Popover>\n        {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n        {!!errorText && (\n          <HelpText isError size={helpTextSize[size]}>\n            {errorText}\n          </HelpText>\n        )}\n      </Box>\n    </SelectProvider>\n  )\n}\n\nSelect.Button = SelectButton\nSelect.Content = SelectContent\nSelect.Group = SelectGroup\nSelect.Option = SelectOption\nSelect.displayName = 'Select'\n\nexport default Select\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,OAAO,OAAoB;CACzC,MAAM,EACJ,UACA,cACA,UACA,WACA,eACA,UACA,IAAI,QACJ,WACA,YACA,OACA,mBACA,kBACA,WACA,MACA,UACA,SACA,aAAa,MACb,cAAc,iBACd,cACA,UACA,cACA,mBACA,mBACA,OAAO,MACP,OACA,QACA,GAAG,SACD;CAEJ,MAAM,cAAc,UAAU;EAAE;EAAc;EAAY;EAAU;EAAO;EAAS;EAAc;EAAU,CAAC;AAE7G,KAAI,WAAW,cAAc,CAAC,MAAM,QAAQ,YAAY,MAAM,CAC5D,SAAQ,MAAM,sEAAsE,MAAM;CAE5F,MAAM,cAAc,OAAO;CAC3B,MAAM,CAAC,OAAO,YAAY,SAAiB,GAAG;CAC9C,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,QAAQ;CAE/D,MAAM,KAAK,UAAU;CAErB,MAAM,UAAU;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ;CACD,MAAM,iBAAiB,MAAW,SAAS,EAAE,OAAO,OAAO,aAAa,CAAC;CAEzE,MAAM,iBAAiB,MACrB,CAAC,qBAAqB,CAAC,OAAO,SAAS,OAAO,GAAG,MAAM,aAAa,EAAE,SAAS,MAAM;AAEvF,iBAAgB;AACd,qBAAmB,SAAS,OAAO,cAAc,CAAC;IACjD,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAAC;EAAe,OAAO;YACrB,qBAAC;GAAI,WAAU;GAAsB;GAAO,GAAI;;IAC7C,CAAC,CAAC,SACD,oBAACA;KACW;KACN;KACG;KACY;KACD;MAClB;IAEJ,oBAAC;KAAoB;eACnB,8CACG,gBAAgB,oBAACC,wBAAa,GAAI,oBAAqB,EACxD,qBAACC;MAAc,UAAS;iBACrB,qBACC,oBAAC,iBACC,oBAAC;OACC,UAAS;OACL;OACJ,GAAG;OACH,IAAI;OACJ,UAAU;OACV,aAAY;OACN;OACN,OAAO;OACP,GAAE;QACF,GACE,EAER,oBAACC;OAAY,MAAM;OAAW,WAAU;OAAO,UAAU;iBACtD,YACC,iBAAiB,OAAM,WACrB,oBAACC;QAA4B;QAAkC,OAAO,OAAO;QAAM,GAAI;UAAtC,OAAO,MAAyC,CACjG;QACQ;OACA,IACf;MACK;IACT,CAAC,CAAC,YAAY,oBAACC;KAAS,MAAM,aAAa;eAAQ;MAAoB;IACvE,CAAC,CAAC,aACD,oBAACA;KAAS;KAAQ,MAAM,aAAa;eAClC;MACQ;;IAET;GACS;;AAIrB,OAAO,SAASJ;AAChB,OAAO,UAAUC;AACjB,OAAO,QAAQC;AACf,OAAO,SAASC;AAChB,OAAO,cAAc"}

package/dist/select/select.types.d.ts

@@ -1,8 +1,12 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 import { ButtonProps } from "../button/button.types.js";
+import "../button/index.js";
 import { ListItemProps, ListProps } from "../list/list.types.js";
+import "../list/index.js";
 import { PopoverContentProps, PopoverProps } from "../popover/popover.types.js";
+import "../popover/index.js";
 import { UseSelectProps } from "./useSelect.types.js";
 import { UseSelectReturnType } from "./useSelect.js";
 import { ReactNode } from "react";

package/dist/select/select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.types.d.ts","names":[],"sources":["../../src/select/select.types.ts"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"select.types.d.ts","names":[],"sources":["../../src/select/select.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;KAUY,iBAAA,CAAA,CAAA,CAAoB;KAEpB,kBAAA,CAAA,CAAA,CAAqB;KAErB,aAAA,CAAA,CAAA,CAAgB,KAC1B,+HAGA;KAEU,gBAAA,CAAA,CAAA,CAAmB;KAEnB,WAAA,CAAA,CAAA,CAAc,yBACxB,cACA,eACA;;EAfU,QAAA,CAAA,CAAA,CAAA,OAAA;EAEA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA,WAAA,CAAA,GAAA,CAAA,UAAA,CAAA,UAAA,CAAA,CAAA,CAAA;EAEA,aAAA,CAAA,CAAA,CAAa,OAAA;EACvB,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,KAAA,CAAA,IAAA,CAAA,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAD0B,SAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAiBH,KAAA,CAAM,SAjBH;EAI1B,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAAmB,QAAA,CAAA,CAAA,CAeN,KAAA,CAAM,SAfA,CAAA,CAAA,CAAA,MAAA;EAET,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,UAAA,CAAA,CAAA;EAEA,EAAA,CAAA,CAAA,CAAA,MAAA;EAAc,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,OAAA,CAAA,IAAA,CAAA,KAAA,CAAA,GAAA,CAAA,EAAA,CAAA,MAAA,CAAA,WAAA,CAAA,CAAA,CAAA;EACxB,SAAA,CAAA,CAAA,CAAA,OAAA;EACA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,SAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,CAAA;EACA,SAAA,CAAA,CAAA,CAAA,MAAA;EAMuB,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,MAAA,CAAA,KAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,OAAA,CAAA,WAAA,CAAA,CAAA,CAAA;EAEV,IAAM,CAAA,CAAA,CAAA,MAAA;EAUA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAQP,KAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CARO,KAAA,CAAM,SAQb;EAQK,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA,SAAA,CAAA,IAAA,CAAA,GAAA,CAAA,KAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA;EAAS,iBAAA,CAAA,CAAA,CAAA,OAAA;EAKhB,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA,CAAA;EASA,gBAAA,CAAA,CAAA,CAAA,MAAiB;EASjB,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA,OAAA,CAAA,UAAA,CAAA,IAAA,CAAA,CAAA,CAAA,OAAA,CAAA,IAAA,CAAA,CAAA;EAEA,UAAA,CAAA,CAAA,CAAA,OAAW;;YAjCT;;;;;;;;iBAQK;;;;KAKP,gBAAA,CAAA,CAAA;;;;;;SAMH;;KAGG,iBAAA,CAAA,CAAA,CAAoB;;;;UAItB;;;;KAKE,gBAAA,CAAA,CAAA,CAAmB,KAAK;KAExB,WAAA,CAAA,CAAA"}

package/dist/select/selectButton.d.ts

@@ -1,8 +1,8 @@
 import { ButtonProps } from "../button/button.types.js";
 import { VuiComponent } from "../core/vui.js";
+import "../index.js";
 
 //#region src/select/selectButton.d.ts
-
 /**
  * Displays a custom button component, which opens a popover on click.
  * Text within the button is either selected value or placeholder.

package/dist/select/selectButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectButton.d.ts","names":[],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAYA,CAAA,CAAA;AAkEE,OAAA,CAAA,KAAA,CAlEW,YAkEX,CAAA,CAlEuB,YAkEvB,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,WAAA,CAAA"}
+{"version":3,"file":"selectButton.d.ts","names":[],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAYa,OAAA,CAAA,KAAA,CAAA,YAkEX,CAAA,CAlEuB,YAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAkEvB,WAAA,CAlEuB"}

package/dist/select/selectButton.js

@@ -1,2 +1,79 @@
-import{cs as e,ellipsisOverflow as t}from"../utils/styles.js";import{useStyleConfig as n}from"../core/theme.js";import{vui as r}from"../core/vui.js";import i from"../button/button.js";import{LineButton as a}from"../button/buttons.js";import o from"../popover/popoverTrigger.js";import{useSelectContext as s}from"./context.js";import{jsx as c}from"react/jsx-runtime";const l=r((r,l)=>{let{className:u,...d}=r,{disabled:f,isInvalid:p,placeholder:m,readOnly:h,valueText:g}=s()??{},_=n(`Select`,s()),v=g||m,y=f?{activeBg:`sandstone.79`,cursor:`not-allowed`,backgroundColor:`sandstone.79`,borderColor:`sandstone.79`,hoverBg:`sandstone.79`,hoverBorderColor:`sandstone.79`,activeBorderColor:`sandstone.79`}:void 0,b=h?{activeBg:`sandstone.95`,bg:`sandstone.95`,color:`seaBlue.main`,cursor:`auto`,disabled:!0,hoverBg:`sandstone.95`,opacity:1}:void 0,x=p?{borderColor:`energyRed.45`,hoverBorderColor:`energyRed.45`}:void 0,S=f?`sandstone.10`:`seaBlue.main`;return c(o,{as:a,bg:`white`,className:e(`vui-selectButton`,u),disabled:f,focusRing:2,fontWeight:`regular`,iconRight:c(i.Icon,{color:S,ml:`auto`,name:`uiAngleDown`}),isFullWidth:!0,px:1,ref:l,text:c(i.Text,{color:`sandstone.10`,...t,children:v}),userSelect:`text`,..._.button,...y,...b,...x,...d})});l.displayName=`SelectButton`;var u=l;export{l as SelectButton,u as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs, ellipsisOverflow } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { vui } from "../core/vui.js";
+import button_default from "../button/button.js";
+import { LineButton } from "../button/buttons.js";
+import popoverTrigger_default from "../popover/popoverTrigger.js";
+import { useSelectContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/select/selectButton.tsx
+/**
+* Displays a custom button component, which opens a popover on click.
+* Text within the button is either selected value or placeholder.
+* Includes special styling for disabled, readOnly and invalid states.
+*/
+const SelectButton = vui((props, ref) => {
+	const { className,...rest } = props;
+	const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {};
+	const styles = useStyleConfig("Select", useSelectContext());
+	const text = valueText || placeholder;
+	const disabledProps = disabled ? {
+		activeBg: "sandstone.79",
+		cursor: "not-allowed",
+		backgroundColor: "sandstone.79",
+		borderColor: "sandstone.79",
+		hoverBg: "sandstone.79",
+		hoverBorderColor: "sandstone.79",
+		activeBorderColor: "sandstone.79"
+	} : void 0;
+	const readOnlyProps = readOnly ? {
+		activeBg: "sandstone.95",
+		bg: "sandstone.95",
+		color: "seaBlue.main",
+		cursor: "auto",
+		disabled: true,
+		hoverBg: "sandstone.95",
+		opacity: 1
+	} : void 0;
+	const isInvalidProps = isInvalid ? {
+		borderColor: "energyRed.45",
+		hoverBorderColor: "energyRed.45"
+	} : void 0;
+	const textColor = "sandstone.10";
+	const iconColor = disabled ? "sandstone.10" : "seaBlue.main";
+	return /* @__PURE__ */ jsx(popoverTrigger_default, {
+		as: LineButton,
+		bg: "white",
+		className: cs("vui-selectButton", className),
+		disabled,
+		focusRing: 2,
+		fontWeight: "regular",
+		iconRight: /* @__PURE__ */ jsx(button_default.Icon, {
+			color: iconColor,
+			ml: "auto",
+			name: "uiAngleDown"
+		}),
+		isFullWidth: true,
+		px: 1,
+		ref,
+		text: /* @__PURE__ */ jsx(button_default.Text, {
+			color: textColor,
+			...ellipsisOverflow,
+			children: text
+		}),
+		userSelect: "text",
+		...styles.button,
+		...disabledProps,
+		...readOnlyProps,
+		...isInvalidProps,
+		...rest
+	});
+});
+SelectButton.displayName = "SelectButton";
+var selectButton_default = SelectButton;
+
+//#endregion
+export { SelectButton, selectButton_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=selectButton.js.map

package/dist/select/selectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectButton.js","names":["PopoverTrigger","Button"],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":["import Button, { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { PopoverTrigger } from '../popover'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectButtonProps } from './select.types'\n\n/**\n * Displays a custom button component, which opens a popover on click.\n * Text within the button is either selected value or placeholder.\n * Includes special styling for disabled, readOnly and invalid states.\n */\nexport const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const text = valueText || placeholder\n\n  const disabledProps = disabled\n    ? {\n        activeBg: 'sandstone.79',\n        cursor: 'not-allowed',\n        backgroundColor: 'sandstone.79',\n        borderColor: 'sandstone.79',\n        hoverBg: 'sandstone.79',\n        hoverBorderColor: 'sandstone.79',\n        activeBorderColor: 'sandstone.79',\n      }\n    : undefined\n\n  const readOnlyProps = readOnly\n    ? {\n        activeBg: 'sandstone.95',\n        bg: 'sandstone.95',\n        color: 'seaBlue.main',\n        cursor: 'auto',\n        disabled: true,\n        hoverBg: 'sandstone.95',\n        opacity: 1,\n      }\n    : undefined\n\n  const isInvalidProps = isInvalid\n    ? {\n        borderColor: 'energyRed.45',\n        hoverBorderColor: 'energyRed.45',\n      }\n    : undefined\n\n  const textColor = 'sandstone.10'\n  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'\n\n  return (\n    <PopoverTrigger\n      as={LineButton}\n      bg=\"white\"\n      className={cs('vui-selectButton', className)}\n      disabled={disabled}\n      focusRing={2}\n      fontWeight=\"regular\"\n      iconRight={<Button.Icon color={iconColor} ml=\"auto\" name=\"uiAngleDown\" />}\n      isFullWidth\n      px={1}\n      ref={ref}\n      text={\n        <Button.Text color={textColor} {...ellipsisOverflow}>\n          {text}\n        </Button.Text>\n      }\n      userSelect=\"text\"\n      {...styles.button}\n      {...disabledProps}\n      {...readOnlyProps}\n      {...isInvalidProps}\n      {...rest}\n    />\n  )\n})\n\nSelectButton.displayName = 'SelectButton'\nexport default SelectButton\n"],"mappings":"8WAYA,MAAa,EAAe,GAAkC,EAAO,IAAQ,CAC3E,GAAM,CAAE,YAAW,GAAG,GAAS,EACzB,CAAE,WAAU,YAAW,cAAa,WAAU,aAAc,GAAkB,EAAI,EAAE,CACpF,EAAS,EAAe,SAAU,GAAkB,CAAC,CAErD,EAAO,GAAa,EAEpB,EAAgB,EAClB,CACE,SAAU,eACV,OAAQ,cACR,gBAAiB,eACjB,YAAa,eACb,QAAS,eACT,iBAAkB,eAClB,kBAAmB,eACpB,CACD,IAAA,GAEE,EAAgB,EAClB,CACE,SAAU,eACV,GAAI,eACJ,MAAO,eACP,OAAQ,OACR,SAAU,GACV,QAAS,eACT,QAAS,EACV,CACD,IAAA,GAEE,EAAiB,EACnB,CACE,YAAa,eACb,iBAAkB,eACnB,CACD,IAAA,GAGE,EAAY,EAAW,eAAiB,eAE9C,OACE,EAACA,EAAAA,CACC,GAAI,EACJ,GAAG,QACH,UAAW,EAAG,mBAAoB,EAAU,CAClC,WACV,UAAW,EACX,WAAW,UACX,UAAW,EAACC,EAAO,KAAA,CAAK,MAAO,EAAW,GAAG,OAAO,KAAK,eAAgB,CACzE,YAAA,GACA,GAAI,EACC,MACL,KACE,EAACA,EAAO,KAAA,CAAK,MAAO,eAAW,GAAI,WAChC,GACW,CAEhB,WAAW,OACX,GAAI,EAAO,OACX,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,GACJ,EAEJ,CAEF,EAAa,YAAc,eAC3B,IAAA,EAAe"}
+{"version":3,"file":"selectButton.js","names":["PopoverTrigger","Button"],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":["import Button, { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { PopoverTrigger } from '../popover'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectButtonProps } from './select.types'\n\n/**\n * Displays a custom button component, which opens a popover on click.\n * Text within the button is either selected value or placeholder.\n * Includes special styling for disabled, readOnly and invalid states.\n */\nexport const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const text = valueText || placeholder\n\n  const disabledProps = disabled\n    ? {\n        activeBg: 'sandstone.79',\n        cursor: 'not-allowed',\n        backgroundColor: 'sandstone.79',\n        borderColor: 'sandstone.79',\n        hoverBg: 'sandstone.79',\n        hoverBorderColor: 'sandstone.79',\n        activeBorderColor: 'sandstone.79',\n      }\n    : undefined\n\n  const readOnlyProps = readOnly\n    ? {\n        activeBg: 'sandstone.95',\n        bg: 'sandstone.95',\n        color: 'seaBlue.main',\n        cursor: 'auto',\n        disabled: true,\n        hoverBg: 'sandstone.95',\n        opacity: 1,\n      }\n    : undefined\n\n  const isInvalidProps = isInvalid\n    ? {\n        borderColor: 'energyRed.45',\n        hoverBorderColor: 'energyRed.45',\n      }\n    : undefined\n\n  const textColor = 'sandstone.10'\n  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'\n\n  return (\n    <PopoverTrigger\n      as={LineButton}\n      bg=\"white\"\n      className={cs('vui-selectButton', className)}\n      disabled={disabled}\n      focusRing={2}\n      fontWeight=\"regular\"\n      iconRight={<Button.Icon color={iconColor} ml=\"auto\" name=\"uiAngleDown\" />}\n      isFullWidth\n      px={1}\n      ref={ref}\n      text={\n        <Button.Text color={textColor} {...ellipsisOverflow}>\n          {text}\n        </Button.Text>\n      }\n      userSelect=\"text\"\n      {...styles.button}\n      {...disabledProps}\n      {...readOnlyProps}\n      {...isInvalidProps}\n      {...rest}\n    />\n  )\n})\n\nSelectButton.displayName = 'SelectButton'\nexport default SelectButton\n"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EAAE,UAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,UAAU,WAAW,aAAa,UAAU,cAAc,kBAAkB,IAAI,EAAE;CAC1F,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,OAAO,aAAa;CAE1B,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,QAAQ;EACR,iBAAiB;EACjB,aAAa;EACb,SAAS;EACT,kBAAkB;EAClB,mBAAmB;EACpB,GACD;CAEJ,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,IAAI;EACJ,OAAO;EACP,QAAQ;EACR,UAAU;EACV,SAAS;EACT,SAAS;EACV,GACD;CAEJ,MAAM,iBAAiB,YACnB;EACE,aAAa;EACb,kBAAkB;EACnB,GACD;CAEJ,MAAM,YAAY;CAClB,MAAM,YAAY,WAAW,iBAAiB;AAE9C,QACE,oBAACA;EACC,IAAI;EACJ,IAAG;EACH,WAAW,GAAG,oBAAoB,UAAU;EAClC;EACV,WAAW;EACX,YAAW;EACX,WAAW,oBAACC,eAAO;GAAK,OAAO;GAAW,IAAG;GAAO,MAAK;IAAgB;EACzE;EACA,IAAI;EACC;EACL,MACE,oBAACA,eAAO;GAAK,OAAO;GAAW,GAAI;aAChC;IACW;EAEhB,YAAW;EACX,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,aAAa,cAAc;AAC3B,2BAAe"}