@tinybigui/react 0.1.0-rc.1 → 0.1.0

package/dist/index.js

@@ -1,11 +1,13 @@
-import $7jXr9$clsx, { clsx } from 'clsx';
+import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
 export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
-import $3whtM$react, { forwardRef, useRef, createContext, useEffect, useContext, useState, useCallback, useMemo, useReducer } from 'react';
-import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps, useSwitch, useRadioGroup, useRadio } from 'react-aria';
+import { forwardRef, useRef, useEffect, createContext, useContext, useState, useCallback } from 'react';
+import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps as mergeProps$1, useSwitch, useRadioGroup, useRadio } from 'react-aria';
+import { mergeProps, filterDOMProps } from '@react-aria/utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
+import { useToggleState, useRadioGroupState } from 'react-stately';
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -128,157 +130,6 @@ function truncateText(lines = 1) {
     textOverflow: "ellipsis"
   };
 }
-var $bdb11010cef70236$export$d41a04c74483c6ef = /* @__PURE__ */ new Map();
-if (typeof FinalizationRegistry !== "undefined") new FinalizationRegistry((heldValue) => {
-  $bdb11010cef70236$export$d41a04c74483c6ef.delete(heldValue);
-});
-function $bdb11010cef70236$export$cd8c9cb68f842629(idA, idB) {
-  if (idA === idB) return idA;
-  let setIdsA = $bdb11010cef70236$export$d41a04c74483c6ef.get(idA);
-  if (setIdsA) {
-    setIdsA.forEach((ref) => ref.current = idB);
-    return idB;
-  }
-  let setIdsB = $bdb11010cef70236$export$d41a04c74483c6ef.get(idB);
-  if (setIdsB) {
-    setIdsB.forEach((ref) => ref.current = idA);
-    return idA;
-  }
-  return idB;
-}
-
-// ../../node_modules/.pnpm/@react-aria+utils@3.32.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@react-aria/utils/dist/chain.mjs
-function $ff5963eb1fccf552$export$e08e3b67e392101e(...callbacks) {
-  return (...args) => {
-    for (let callback of callbacks) if (typeof callback === "function") callback(...args);
-  };
-}
-function $3ef42575df84b30b$export$9d1611c77c2fe928(...args) {
-  let result = {
-    ...args[0]
-  };
-  for (let i = 1; i < args.length; i++) {
-    let props = args[i];
-    for (let key in props) {
-      let a = result[key];
-      let b = props[key];
-      if (typeof a === "function" && typeof b === "function" && // This is a lot faster than a regex.
-      key[0] === "o" && key[1] === "n" && key.charCodeAt(2) >= /* 'A' */
-      65 && key.charCodeAt(2) <= /* 'Z' */
-      90) result[key] = ($ff5963eb1fccf552$export$e08e3b67e392101e)(a, b);
-      else if ((key === "className" || key === "UNSAFE_className") && typeof a === "string" && typeof b === "string") result[key] = ($7jXr9$clsx)(a, b);
-      else if (key === "id" && a && b) result.id = ($bdb11010cef70236$export$cd8c9cb68f842629)(a, b);
-      else result[key] = b !== void 0 ? b : a;
-    }
-  }
-  return result;
-}
-
-// ../../node_modules/.pnpm/@react-aria+utils@3.32.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@react-aria/utils/dist/filterDOMProps.mjs
-var $65484d02dcb7eb3e$var$DOMPropNames = /* @__PURE__ */ new Set([
-  "id"
-]);
-var $65484d02dcb7eb3e$var$labelablePropNames = /* @__PURE__ */ new Set([
-  "aria-label",
-  "aria-labelledby",
-  "aria-describedby",
-  "aria-details"
-]);
-var $65484d02dcb7eb3e$var$linkPropNames = /* @__PURE__ */ new Set([
-  "href",
-  "hrefLang",
-  "target",
-  "rel",
-  "download",
-  "ping",
-  "referrerPolicy"
-]);
-var $65484d02dcb7eb3e$var$globalAttrs = /* @__PURE__ */ new Set([
-  "dir",
-  "lang",
-  "hidden",
-  "inert",
-  "translate"
-]);
-var $65484d02dcb7eb3e$var$globalEvents = /* @__PURE__ */ new Set([
-  "onClick",
-  "onAuxClick",
-  "onContextMenu",
-  "onDoubleClick",
-  "onMouseDown",
-  "onMouseEnter",
-  "onMouseLeave",
-  "onMouseMove",
-  "onMouseOut",
-  "onMouseOver",
-  "onMouseUp",
-  "onTouchCancel",
-  "onTouchEnd",
-  "onTouchMove",
-  "onTouchStart",
-  "onPointerDown",
-  "onPointerMove",
-  "onPointerUp",
-  "onPointerCancel",
-  "onPointerEnter",
-  "onPointerLeave",
-  "onPointerOver",
-  "onPointerOut",
-  "onGotPointerCapture",
-  "onLostPointerCapture",
-  "onScroll",
-  "onWheel",
-  "onAnimationStart",
-  "onAnimationEnd",
-  "onAnimationIteration",
-  "onTransitionCancel",
-  "onTransitionEnd",
-  "onTransitionRun",
-  "onTransitionStart"
-]);
-var $65484d02dcb7eb3e$var$propRe = /^(data-.*)$/;
-function $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, opts = {}) {
-  let { labelable, isLink, global, events = global, propNames } = opts;
-  let filteredProps = {};
-  for (const prop in props) if (Object.prototype.hasOwnProperty.call(props, prop) && ($65484d02dcb7eb3e$var$DOMPropNames.has(prop) || labelable && $65484d02dcb7eb3e$var$labelablePropNames.has(prop) || isLink && $65484d02dcb7eb3e$var$linkPropNames.has(prop) || global && $65484d02dcb7eb3e$var$globalAttrs.has(prop) || events && ($65484d02dcb7eb3e$var$globalEvents.has(prop) || prop.endsWith("Capture") && $65484d02dcb7eb3e$var$globalEvents.has(prop.slice(0, -7))) || (propNames === null || propNames === void 0 ? void 0 : propNames.has(prop)) || $65484d02dcb7eb3e$var$propRe.test(prop))) filteredProps[prop] = props[prop];
-  return filteredProps;
-}
-var $458b0a5536c1a7cf$var$_React_useInsertionEffect;
-var $458b0a5536c1a7cf$var$useEarlyEffect = typeof document !== "undefined" ? ($458b0a5536c1a7cf$var$_React_useInsertionEffect = ($3whtM$react)["useInsertionEffect"]) !== null && $458b0a5536c1a7cf$var$_React_useInsertionEffect !== void 0 ? $458b0a5536c1a7cf$var$_React_useInsertionEffect : ($3whtM$react).useLayoutEffect : () => {
-};
-function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (useState)(value || defaultValue);
-  let valueRef = (useRef)(stateValue);
-  let isControlledRef = (useRef)(value !== void 0);
-  let isControlled = value !== void 0;
-  (useEffect)(() => {
-    let wasControlled = isControlledRef.current;
-    if (wasControlled !== isControlled && process.env.NODE_ENV !== "production") console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
-    isControlledRef.current = isControlled;
-  }, [
-    isControlled
-  ]);
-  let currentValue = isControlled ? value : stateValue;
-  $458b0a5536c1a7cf$var$useEarlyEffect(() => {
-    valueRef.current = currentValue;
-  });
-  let [, forceUpdate] = (useReducer)(() => ({}), {});
-  let setValue = (useCallback)((value2, ...args) => {
-    let newValue = typeof value2 === "function" ? value2(valueRef.current) : value2;
-    if (!Object.is(valueRef.current, newValue)) {
-      valueRef.current = newValue;
-      setStateValue(newValue);
-      forceUpdate();
-      onChange === null || onChange === void 0 ? void 0 : onChange(newValue, ...args);
-    }
-  }, [
-    onChange
-  ]);
-  return [
-    currentValue,
-    setValue
-  ];
-}
 var ButtonHeadless = forwardRef(
   ({ className, children, tabIndex = 0, onMouseDown, type, ...restProps }, forwardedRef) => {
     const internalRef = useRef(null);
@@ -300,7 +151,7 @@ var ButtonHeadless = forwardRef(
       onPressUp: _onPressUp,
       ...htmlAttrs
     } = restProps;
-    const mergedProps = $3ef42575df84b30b$export$9d1611c77c2fe928(
+    const mergedProps = mergeProps(
       buttonProps,
       {
         tabIndex,
@@ -697,8 +548,8 @@ var IconButtonHeadless = forwardRef(
       },
       ref
     );
-    const domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
-    const mergedProps = $3ef42575df84b30b$export$9d1611c77c2fe928(
+    const domProps = filterDOMProps(props);
+    const mergedProps = mergeProps(
       buttonProps,
       domProps,
       {
@@ -956,7 +807,7 @@ var IconButton = forwardRef(
       onMouseDown?.(e);
       handleRipple(e);
     };
-    const mergedPropsValue = $3ef42575df84b30b$export$9d1611c77c2fe928(props, {
+    const mergedPropsValue = mergeProps(props, {
       ...onPress && { onPress },
       onMouseDown: mergedOnMouseDown,
       isDisabled
@@ -1016,8 +867,8 @@ var FABHeadless = forwardRef(
       },
       ref
     );
-    const domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
-    const mergedProps = $3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, domProps, {
+    const domProps = filterDOMProps(props);
+    const mergedProps = mergeProps(buttonProps, domProps, {
       tabIndex,
       className,
       onMouseDown,
@@ -1284,7 +1135,7 @@ var FAB = forwardRef(
       onMouseDown?.(e);
       handleRipple(e);
     };
-    const mergedPropsValue = $3ef42575df84b30b$export$9d1611c77c2fe928(props, {
+    const mergedPropsValue = mergeProps(props, {
       ...onPress && { onPress },
       onMouseDown: mergedOnMouseDown,
       isDisabled
@@ -1644,7 +1495,7 @@ var TextFieldHeadless = forwardRef(
     const displayErrorMessage = errorMessage ?? validationErrors.join(" ");
     const currentValue = typeof inputProps.value === "string" ? inputProps.value : typeof inputProps.defaultValue === "string" ? inputProps.defaultValue : "";
     if (typeof children === "function") {
-      const mergedInputProps2 = $3ef42575df84b30b$export$9d1611c77c2fe928(
+      const mergedInputProps2 = mergeProps(
         inputProps,
         focusProps
       );
@@ -1686,7 +1537,7 @@ var TextFieldHeadless = forwardRef(
       onFocusChange: _onFocusChange,
       ...htmlAttrs
     } = restProps;
-    const mergedInputProps = $3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps, htmlAttrs, {
+    const mergedInputProps = mergeProps(inputProps, focusProps, htmlAttrs, {
       className: inputClassName
     });
     return /* @__PURE__ */ jsxs("div", { className, style: fullWidth ? { width: "100%" } : void 0, children: [
@@ -1903,196 +1754,6 @@ var TextField = forwardRef(
   }
 );
 TextField.displayName = "TextField";
-var $e5be200c675c3b3a$export$aca958c65c314e6c = {
-  badInput: false,
-  customError: false,
-  patternMismatch: false,
-  rangeOverflow: false,
-  rangeUnderflow: false,
-  stepMismatch: false,
-  tooLong: false,
-  tooShort: false,
-  typeMismatch: false,
-  valueMissing: false,
-  valid: true
-};
-var $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
-  ...$e5be200c675c3b3a$export$aca958c65c314e6c,
-  customError: true,
-  valid: false
-};
-var $e5be200c675c3b3a$export$dad6ae84456c676a = {
-  isInvalid: false,
-  validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
-  validationErrors: []
-};
-var $e5be200c675c3b3a$export$571b5131b7e65c11 = (createContext)({});
-var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
-function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
-  if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
-    let { realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
-    return {
-      realtimeValidation,
-      displayValidation,
-      updateValidation,
-      resetValidation,
-      commitValidation
-    };
-  }
-  return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
-}
-function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
-  let { isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = "aria" } = props;
-  if (validationState) isInvalid || (isInvalid = validationState === "invalid");
-  let controlledError = isInvalid !== void 0 ? {
-    isInvalid,
-    validationErrors: [],
-    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
-  } : null;
-  let clientError = (useMemo)(() => {
-    if (!validate || value == null) return null;
-    let validateErrors = $e5be200c675c3b3a$var$runValidate(validate, value);
-    return $e5be200c675c3b3a$var$getValidationResult(validateErrors);
-  }, [
-    validate,
-    value
-  ]);
-  if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid) builtinValidation = void 0;
-  let serverErrors = (useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
-  let serverErrorMessages = (useMemo)(() => {
-    if (name) return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
-    return [];
-  }, [
-    serverErrors,
-    name
-  ]);
-  let [lastServerErrors, setLastServerErrors] = (useState)(serverErrors);
-  let [isServerErrorCleared, setServerErrorCleared] = (useState)(false);
-  if (serverErrors !== lastServerErrors) {
-    setLastServerErrors(serverErrors);
-    setServerErrorCleared(false);
-  }
-  let serverError = (useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
-    isServerErrorCleared,
-    serverErrorMessages
-  ]);
-  let nextValidation = (useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let [currentValidity, setCurrentValidity] = (useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let lastError = (useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let commitValidation = () => {
-    if (!commitQueued) return;
-    setCommitQueued(false);
-    let error = clientError || builtinValidation || nextValidation.current;
-    if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
-      lastError.current = error;
-      setCurrentValidity(error);
-    }
-  };
-  let [commitQueued, setCommitQueued] = (useState)(false);
-  (useEffect)(commitValidation);
-  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
-  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
-  return {
-    realtimeValidation,
-    displayValidation,
-    updateValidation(value2) {
-      if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2)) setCurrentValidity(value2);
-      else nextValidation.current = value2;
-    },
-    resetValidation() {
-      let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
-      if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
-        lastError.current = error;
-        setCurrentValidity(error);
-      }
-      if (validationBehavior === "native") setCommitQueued(false);
-      setServerErrorCleared(true);
-    },
-    commitValidation() {
-      if (validationBehavior === "native") setCommitQueued(true);
-      setServerErrorCleared(true);
-    }
-  };
-}
-function $e5be200c675c3b3a$var$asArray(v) {
-  if (!v) return [];
-  return Array.isArray(v) ? v : [
-    v
-  ];
-}
-function $e5be200c675c3b3a$var$runValidate(validate, value) {
-  if (typeof validate === "function") {
-    let e = validate(value);
-    if (e && typeof e !== "boolean") return $e5be200c675c3b3a$var$asArray(e);
-  }
-  return [];
-}
-function $e5be200c675c3b3a$var$getValidationResult(errors) {
-  return errors.length ? {
-    isInvalid: true,
-    validationErrors: errors,
-    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
-  } : null;
-}
-function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
-  if (a === b) return true;
-  return !!a && !!b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
-}
-var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
-var $a54cdc5c1942b639$var$i = 0;
-function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
-  let name = (useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
-    props.name
-  ]);
-  var _props_defaultValue;
-  let [selectedValue, setSelected] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
-  let [initialValue] = (useState)(selectedValue);
-  let [lastFocusedValue, setLastFocusedValue] = (useState)(null);
-  let validation = ($e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
-    ...props,
-    value: selectedValue
-  });
-  let setSelectedValue = (value) => {
-    if (!props.isReadOnly && !props.isDisabled) {
-      setSelected(value);
-      validation.commitValidation();
-    }
-  };
-  let isInvalid = validation.displayValidation.isInvalid;
-  var _props_defaultValue1;
-  return {
-    ...validation,
-    name,
-    selectedValue,
-    defaultSelectedValue: props.value !== void 0 ? initialValue : (_props_defaultValue1 = props.defaultValue) !== null && _props_defaultValue1 !== void 0 ? _props_defaultValue1 : null,
-    setSelectedValue,
-    lastFocusedValue,
-    setLastFocusedValue,
-    isDisabled: props.isDisabled || false,
-    isReadOnly: props.isReadOnly || false,
-    isRequired: props.isRequired || false,
-    validationState: props.validationState || (isInvalid ? "invalid" : null),
-    isInvalid
-  };
-}
-function $3017fa7ffdddec74$export$8042c6c013fd5226(props = {}) {
-  let { isReadOnly } = props;
-  let [isSelected, setSelected] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.isSelected, props.defaultSelected || false, props.onChange);
-  let [initialValue] = (useState)(isSelected);
-  function updateSelected(value) {
-    if (!isReadOnly) setSelected(value);
-  }
-  function toggleState() {
-    if (!isReadOnly) setSelected(!isSelected);
-  }
-  var _props_defaultSelected;
-  return {
-    isSelected,
-    defaultSelected: (_props_defaultSelected = props.defaultSelected) !== null && _props_defaultSelected !== void 0 ? _props_defaultSelected : initialValue,
-    setSelected: updateSelected,
-    toggle: toggleState
-  };
-}
 var checkboxVariants = cva(
   [
     // Base classes (always applied to label wrapper)
@@ -2308,7 +1969,7 @@ var Checkbox = forwardRef(
       title: _htmlTitle,
       ...restPropsWithoutHtmlAttrs
     } = props;
-    const state = $3017fa7ffdddec74$export$8042c6c013fd5226(restPropsWithoutHtmlAttrs);
+    const state = useToggleState(restPropsWithoutHtmlAttrs);
     const { inputProps, labelProps } = useCheckbox(
       restPropsWithoutHtmlAttrs,
       state,
@@ -2346,7 +2007,7 @@ var Checkbox = forwardRef(
         "data-testid": dataTestId,
         title: htmlTitle,
         children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps(inputProps, focusProps), ref, id: htmlId }) }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps$1(inputProps, focusProps), ref, id: htmlId }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -2725,7 +2386,7 @@ var Switch = forwardRef(
       title: _htmlTitle,
       ...restPropsWithoutHtmlAttrs
     } = props;
-    const state = $3017fa7ffdddec74$export$8042c6c013fd5226(restPropsWithoutHtmlAttrs);
+    const state = useToggleState(restPropsWithoutHtmlAttrs);
     const { inputProps, labelProps, isPressed } = useSwitch(
       restPropsWithoutHtmlAttrs,
       state,
@@ -2757,7 +2418,7 @@ var Switch = forwardRef(
         "data-testid": dataTestId,
         title: htmlTitle,
         children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps(inputProps, focusProps), ref, id: htmlId }) }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps$1(inputProps, focusProps), ref, id: htmlId }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -2856,7 +2517,7 @@ var RadioGroupHeadless = forwardRef(
   ({ className, children, renderLabel, ...props }, forwardedRef) => {
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
-    const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(props);
+    const state = useRadioGroupState(props);
     const { radioGroupProps, labelProps } = useRadioGroup(props, state);
     const dataTestId = props["data-testid"];
     return /* @__PURE__ */ jsxs("div", { ...radioGroupProps, ref, className, "data-testid": dataTestId, children: [
@@ -3152,7 +2813,7 @@ var Radio = forwardRef(
         "data-testid": dataTestId,
         title: htmlTitle,
         children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps(inputProps, focusProps), ref, id: htmlId }) }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps$1(inputProps, focusProps), ref, id: htmlId }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -3245,7 +2906,7 @@ var RadioGroup = forwardRef(
     children,
     // State props
     orientation = "vertical",
-    isInvalid = false,
+    isInvalid: _isInvalid = false,
     isDisabled = false,
     // Styling
     className,