@rjsf/chakra-ui 6.0.0-alpha.0 → 6.0.0-beta.2

package/dist/chakra-ui.esm.js

@@ -4,107 +4,63 @@ import { withTheme } from "@rjsf/core";
 // src/AddButton/AddButton.tsx
 import { TranslatableString } from "@rjsf/utils";
 import { Button } from "@chakra-ui/react";
-import { AddIcon } from "@chakra-ui/icons";
-import { jsx } from "react/jsx-runtime";
+import { PlusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 function AddButton({
   uiSchema,
   registry,
   ...props
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ jsx(Button, { leftIcon: /* @__PURE__ */ jsx(AddIcon, {}), ...props, children: translateString(TranslatableString.AddItemButton) });
+  return /* @__PURE__ */ jsxs(Button, { ...props, children: [
+    /* @__PURE__ */ jsx(PlusIcon, {}),
+    translateString(TranslatableString.AddItemButton)
+  ] });
 }
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
-import { useMemo } from "react";
 import { Box, ButtonGroup, HStack } from "@chakra-ui/react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import {
+  getTemplate,
+  getUiOptions
+} from "@rjsf/utils";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ArrayFieldItemTemplate(props) {
-  const {
-    children,
-    disabled,
-    hasToolbar,
-    hasCopy,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
-    readonly,
-    uiSchema,
-    registry
-  } = props;
-  const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
-  const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
-  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
-  return /* @__PURE__ */ jsxs(HStack, { alignItems: "flex-end", py: 1, children: [
+  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate(
+    "ArrayFieldItemButtonsTemplate",
+    registry,
+    uiOptions
+  );
+  return /* @__PURE__ */ jsxs2(HStack, { alignItems: "flex-end", py: 1, children: [
     /* @__PURE__ */ jsx2(Box, { w: "100%", children }),
-    hasToolbar && /* @__PURE__ */ jsx2(Box, { children: /* @__PURE__ */ jsxs(ButtonGroup, { isAttached: true, mb: 1, children: [
-      (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx2(
-        MoveUpButton2,
-        {
-          disabled: disabled || readonly || !hasMoveUp,
-          onClick: onArrowUpClick,
-          uiSchema,
-          registry
-        }
-      ),
-      (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx2(
-        MoveDownButton2,
-        {
-          disabled: disabled || readonly || !hasMoveDown,
-          onClick: onArrowDownClick,
-          uiSchema,
-          registry
-        }
-      ),
-      hasCopy && /* @__PURE__ */ jsx2(
-        CopyButton2,
-        {
-          disabled: disabled || readonly,
-          onClick: onCopyClick,
-          uiSchema,
-          registry
-        }
-      ),
-      hasRemove && /* @__PURE__ */ jsx2(
-        RemoveButton2,
-        {
-          disabled: disabled || readonly,
-          onClick: onRemoveClick,
-          uiSchema,
-          registry
-        }
-      )
-    ] }) })
+    hasToolbar && /* @__PURE__ */ jsx2(Box, { children: /* @__PURE__ */ jsx2(ButtonGroup, { attached: true, mb: 1, children: /* @__PURE__ */ jsx2(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) }) })
   ] });
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
 import { Box as Box2, Grid, GridItem } from "@chakra-ui/react";
 import {
-  getTemplate,
-  getUiOptions
+  getTemplate as getTemplate2,
+  getUiOptions as getUiOptions2,
+  buttonId
 } from "@rjsf/utils";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ArrayFieldTemplate(props) {
   const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
-  const uiOptions = getUiOptions(uiSchema);
-  const ArrayFieldDescriptionTemplate = getTemplate(
+  const uiOptions = getUiOptions2(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate2(
     "ArrayFieldDescriptionTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate(
+  const ArrayFieldItemTemplate2 = getTemplate2(
     "ArrayFieldItemTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldTitleTemplate = getTemplate(
+  const ArrayFieldTitleTemplate = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
@@ -112,7 +68,7 @@ function ArrayFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs2(Box2, { children: [
+  return /* @__PURE__ */ jsxs3(Box2, { children: [
     /* @__PURE__ */ jsx3(
       ArrayFieldTitleTemplate,
       {
@@ -134,12 +90,13 @@ function ArrayFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsxs2(Grid, { children: [
+    /* @__PURE__ */ jsxs3(Grid, { children: [
       /* @__PURE__ */ jsx3(GridItem, { children: items.length > 0 && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
       canAdd && /* @__PURE__ */ jsx3(GridItem, { justifySelf: "flex-end", children: /* @__PURE__ */ jsx3(Box2, { mt: 2, children: /* @__PURE__ */ jsx3(
         AddButton2,
         {
-          className: "array-item-add",
+          id: buttonId(idSchema, "add"),
+          className: "rjsf-array-item-add",
           onClick: onAddClick,
           disabled: disabled || readonly,
           uiSchema,
@@ -151,7 +108,7 @@ function ArrayFieldTemplate(props) {
 }
 
 // src/BaseInputTemplate/BaseInputTemplate.tsx
-import { FormControl, FormLabel, Input } from "@chakra-ui/react";
+import { Input } from "@chakra-ui/react";
 import {
   ariaDescribedByIds,
   examplesId,
@@ -159,20 +116,25 @@ import {
   getInputProps
 } from "@rjsf/utils";
 
-// src/utils.ts
-import { shouldForwardProp } from "@chakra-ui/react";
-function getChakra({ uiSchema = {} }) {
-  const chakraProps = uiSchema["ui:options"] && uiSchema["ui:options"].chakra || {};
-  Object.keys(chakraProps).forEach((key) => {
-    if (shouldForwardProp(key)) {
-      delete chakraProps[key];
-    }
-  });
-  return chakraProps;
-}
+// src/components/ui/field.tsx
+import { forwardRef } from "react";
+import { Field as ChakraField } from "@chakra-ui/react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Field = forwardRef(function Field2(props, ref) {
+  const { label, children, helperText, errorText, optionalText, ...rest } = props;
+  return /* @__PURE__ */ jsxs4(ChakraField.Root, { ref, ...rest, children: [
+    label && /* @__PURE__ */ jsxs4(ChakraField.Label, { children: [
+      label,
+      /* @__PURE__ */ jsx4(ChakraField.RequiredIndicator, { fallback: optionalText })
+    ] }),
+    children,
+    helperText && /* @__PURE__ */ jsx4(ChakraField.HelperText, { children: helperText }),
+    errorText && /* @__PURE__ */ jsx4(ChakraField.ErrorText, { children: errorText })
+  ] });
+});
 
 // src/BaseInputTemplate/BaseInputTemplate.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
   const {
     id,
@@ -181,7 +143,6 @@ function BaseInputTemplate(props) {
     label,
     hideLabel,
     schema,
-    uiSchema,
     onChange,
     onChangeOverride,
     onBlur,
@@ -195,25 +156,20 @@ function BaseInputTemplate(props) {
     disabled
   } = props;
   const inputProps = getInputProps(schema, type, options);
-  const chakraProps = getChakra({ uiSchema });
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsxs3(
-    FormControl,
+  return /* @__PURE__ */ jsxs5(
+    Field,
     {
       mb: 1,
-      ...chakraProps,
-      isDisabled: disabled || readonly,
-      isRequired: required,
-      isReadOnly: readonly,
-      isInvalid: rawErrors && rawErrors.length > 0,
+      disabled: disabled || readonly,
+      required,
+      readOnly: readonly,
+      invalid: rawErrors && rawErrors.length > 0,
+      label: labelValue(label, hideLabel || !label),
       children: [
-        labelValue(
-          /* @__PURE__ */ jsx4(FormLabel, { htmlFor: id, id: `${id}-label`, children: label }),
-          hideLabel || !label
-        ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Input,
           {
             id,
@@ -229,8 +185,8 @@ function BaseInputTemplate(props) {
             "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
           }
         ),
-        Array.isArray(schema.examples) ? /* @__PURE__ */ jsx4("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
-          return /* @__PURE__ */ jsx4("option", { value: example }, example);
+        Array.isArray(schema.examples) ? /* @__PURE__ */ jsx5("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
+          return /* @__PURE__ */ jsx5("option", { value: example }, example);
         }) }) : null
       ]
     }
@@ -238,68 +194,103 @@ function BaseInputTemplate(props) {
 }
 
 // src/DescriptionField/DescriptionField.tsx
+import { RichDescription } from "@rjsf/core";
 import { Text } from "@chakra-ui/react";
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
-function DescriptionField({ description, id }) {
+import { jsx as jsx6 } from "react/jsx-runtime";
+function DescriptionField({ description, id, registry, uiSchema }) {
   if (!description) {
     return null;
   }
-  if (typeof description === "string") {
-    return /* @__PURE__ */ jsx5(Text, { as: "sup", fontSize: "md", id, children: description });
-  }
-  return /* @__PURE__ */ jsx5(Fragment, { children: description });
+  return /* @__PURE__ */ jsx6(Text, { as: "sup", fontSize: "md", id, children: /* @__PURE__ */ jsx6(RichDescription, { description, registry, uiSchema }) });
 }
 
 // src/ErrorList/ErrorList.tsx
 import { TranslatableString as TranslatableString2 } from "@rjsf/utils";
-import { List, ListIcon, ListItem, Alert, AlertTitle } from "@chakra-ui/react";
-import { WarningIcon } from "@chakra-ui/icons";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { ListIndicator, ListItem, ListRoot } from "@chakra-ui/react";
+import { TriangleAlert } from "lucide-react";
+
+// src/components/ui/alert.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Alert as ChakraAlert } from "@chakra-ui/react";
+
+// src/components/ui/close-button.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { IconButton as ChakraIconButton } from "@chakra-ui/react";
+import { LuX } from "react-icons/lu";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CloseButton = forwardRef2(function CloseButton2(props, ref) {
+  return /* @__PURE__ */ jsx7(ChakraIconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ jsx7(LuX, {}) });
+});
+
+// src/components/ui/alert.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var Alert = forwardRef3(function Alert2(props, ref) {
+  const { title, children, icon, closable, onClose, startElement, endElement, ...rest } = props;
+  return /* @__PURE__ */ jsxs6(ChakraAlert.Root, { ref, ...rest, children: [
+    startElement || /* @__PURE__ */ jsx8(ChakraAlert.Indicator, { children: icon }),
+    children ? /* @__PURE__ */ jsxs6(ChakraAlert.Content, { children: [
+      /* @__PURE__ */ jsx8(ChakraAlert.Title, { children: title }),
+      /* @__PURE__ */ jsx8(ChakraAlert.Description, { children })
+    ] }) : /* @__PURE__ */ jsx8(ChakraAlert.Title, { flex: "1", children: title }),
+    endElement,
+    closable && /* @__PURE__ */ jsx8(CloseButton, { size: "sm", pos: "relative", top: "-2", insetEnd: "-2", alignSelf: "flex-start", onClick: onClose })
+  ] });
+});
+
+// src/ErrorList/ErrorList.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function ErrorList({
   errors,
   registry
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ jsxs4(Alert, { flexDirection: "column", alignItems: "flex-start", gap: 3, status: "error", children: [
-    /* @__PURE__ */ jsx6(AlertTitle, { children: translateString(TranslatableString2.ErrorsLabel) }),
-    /* @__PURE__ */ jsx6(List, { children: errors.map((error, i) => /* @__PURE__ */ jsxs4(ListItem, { children: [
-      /* @__PURE__ */ jsx6(ListIcon, { as: WarningIcon, color: "red.500" }),
-      error.stack
-    ] }, i)) })
-  ] });
+  return /* @__PURE__ */ jsx9(
+    Alert,
+    {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: 3,
+      status: "error",
+      title: translateString(TranslatableString2.ErrorsLabel),
+      children: /* @__PURE__ */ jsx9(ListRoot, { children: errors.map((error, i) => /* @__PURE__ */ jsxs7(ListItem, { children: [
+        /* @__PURE__ */ jsx9(ListIndicator, { asChild: true, color: "red.500", children: /* @__PURE__ */ jsx9(TriangleAlert, {}) }),
+        error.stack
+      ] }, i)) })
+    }
+  );
 }
 
 // src/IconButton/ChakraIconButton.tsx
 import { memo } from "react";
 import { IconButton } from "@chakra-ui/react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function ChakraIconButton(props) {
+import { jsx as jsx10 } from "react/jsx-runtime";
+function ChakraIconButton2(props) {
   const { icon, iconType, uiSchema, registry, ...otherProps } = props;
-  return /* @__PURE__ */ jsx7(IconButton, { "aria-label": props.title, ...otherProps, icon });
+  return /* @__PURE__ */ jsx10(IconButton, { "aria-label": props.title, ...otherProps, children: icon });
 }
-ChakraIconButton.displayName = "ChakraIconButton";
-var ChakraIconButton_default = memo(ChakraIconButton);
+ChakraIconButton2.displayName = "ChakraIconButton";
+var ChakraIconButton_default = memo(ChakraIconButton2);
 
 // src/IconButton/IconButton.tsx
 import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
-import { ArrowUpIcon, ArrowDownIcon, CopyIcon, DeleteIcon } from "@chakra-ui/icons";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { ArrowUpIcon, ArrowDownIcon, CopyIcon, DeleteIcon } from "lucide-react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function CopyButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx8(ChakraIconButton_default, { title: translateString(TranslatableString3.CopyButton), ...props, icon: /* @__PURE__ */ jsx8(CopyIcon, {}) });
+  return /* @__PURE__ */ jsx11(ChakraIconButton_default, { title: translateString(TranslatableString3.CopyButton), ...props, icon: /* @__PURE__ */ jsx11(CopyIcon, {}) });
 }
 function MoveDownButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     ChakraIconButton_default,
     {
       title: translateString(TranslatableString3.MoveDownButton),
       ...props,
-      icon: /* @__PURE__ */ jsx8(ArrowDownIcon, {})
+      icon: /* @__PURE__ */ jsx11(ArrowDownIcon, {})
     }
   );
 }
@@ -307,12 +298,12 @@ function MoveUpButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     ChakraIconButton_default,
     {
       title: translateString(TranslatableString3.MoveUpButton),
       ...props,
-      icon: /* @__PURE__ */ jsx8(ArrowUpIcon, {})
+      icon: /* @__PURE__ */ jsx11(ArrowUpIcon, {})
     }
   );
 }
@@ -320,51 +311,51 @@ function RemoveButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     ChakraIconButton_default,
     {
       title: translateString(TranslatableString3.RemoveButton),
       ...props,
-      icon: /* @__PURE__ */ jsx8(DeleteIcon, {})
+      icon: /* @__PURE__ */ jsx11(DeleteIcon, {})
     }
   );
 }
 
 // src/FieldErrorTemplate/FieldErrorTemplate.tsx
 import { errorId } from "@rjsf/utils";
-import { FormErrorMessage, List as List2, ListItem as ListItem2 } from "@chakra-ui/react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { ListItem as ListItem2, ListRoot as ListRoot2, Text as Text2 } from "@chakra-ui/react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function FieldErrorTemplate(props) {
   const { errors = [], idSchema } = props;
   if (errors.length === 0) {
     return null;
   }
   const id = errorId(idSchema);
-  return /* @__PURE__ */ jsx9(List2, { children: errors.map((error, i) => {
-    return /* @__PURE__ */ jsx9(ListItem2, { children: /* @__PURE__ */ jsx9(FormErrorMessage, { id, children: error }) }, i);
+  return /* @__PURE__ */ jsx12(ListRoot2, { children: errors.map((error, i) => {
+    return /* @__PURE__ */ jsx12(ListItem2, { children: /* @__PURE__ */ jsx12(Text2, { id, children: error }) }, i);
   }) });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
+import { Text as Text3 } from "@chakra-ui/react";
 import { helpId } from "@rjsf/utils";
-import { FormHelperText } from "@chakra-ui/react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
   const { idSchema, help } = props;
   if (!help) {
     return null;
   }
   const id = helpId(idSchema);
-  return /* @__PURE__ */ jsx10(FormHelperText, { id, children: help });
+  return /* @__PURE__ */ jsx13(Text3, { id, children: help });
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
+import { Fieldset } from "@chakra-ui/react";
 import {
-  getTemplate as getTemplate2,
-  getUiOptions as getUiOptions2
+  getTemplate as getTemplate3,
+  getUiOptions as getUiOptions3
 } from "@rjsf/utils";
-import { Text as Text2, FormControl as FormControl2 } from "@chakra-ui/react";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function FieldTemplate(props) {
   const {
     id,
@@ -388,16 +379,16 @@ function FieldTemplate(props) {
     schema,
     uiSchema
   } = props;
-  const uiOptions = getUiOptions2(uiSchema);
-  const WrapIfAdditionalTemplate2 = getTemplate2(
+  const uiOptions = getUiOptions3(uiSchema);
+  const WrapIfAdditionalTemplate2 = getTemplate3(
     "WrapIfAdditionalTemplate",
     registry,
     uiOptions
   );
   if (hidden) {
-    return /* @__PURE__ */ jsx11("div", { style: { display: "none" }, children });
+    return /* @__PURE__ */ jsx14("div", { style: { display: "none" }, children });
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     WrapIfAdditionalTemplate2,
     {
       classNames,
@@ -412,26 +403,38 @@ function FieldTemplate(props) {
       schema,
       uiSchema,
       registry,
-      children: /* @__PURE__ */ jsxs5(FormControl2, { isRequired: required, isInvalid: rawErrors && rawErrors.length > 0, children: [
-        children,
-        displayLabel && rawDescription ? /* @__PURE__ */ jsx11(Text2, { mt: 2, children: description }) : null,
-        errors,
-        help
+      children: /* @__PURE__ */ jsxs8(Fieldset.Root, { disabled, invalid: rawErrors && rawErrors.length > 0, children: [
+        displayLabel && rawDescription ? /* @__PURE__ */ jsx14(Fieldset.Legend, { mt: 2, children: description }) : null,
+        help,
+        /* @__PURE__ */ jsx14(Fieldset.Content, { children }),
+        errors && /* @__PURE__ */ jsx14(Fieldset.ErrorText, { children: errors })
       ] })
     }
   );
 }
 
-// src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+// src/GridTemplate/GridTemplate.tsx
 import { Grid as Grid2, GridItem as GridItem2 } from "@chakra-ui/react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function GridTemplate(props) {
+  const { children, column, ...rest } = props;
+  if (column) {
+    return /* @__PURE__ */ jsx15(GridItem2, { ...rest, children });
+  }
+  return /* @__PURE__ */ jsx15(Grid2, { ...rest, children });
+}
+
+// src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+import { Grid as Grid3, GridItem as GridItem3 } from "@chakra-ui/react";
 import {
+  buttonId as buttonId2,
   canExpand,
   descriptionId,
-  getTemplate as getTemplate3,
-  getUiOptions as getUiOptions3,
+  getTemplate as getTemplate4,
+  getUiOptions as getUiOptions4,
   titleId
 } from "@rjsf/utils";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -447,9 +450,9 @@ function ObjectFieldTemplate(props) {
     onAddClick,
     registry
   } = props;
-  const uiOptions = getUiOptions3(uiSchema);
-  const TitleFieldTemplate = getTemplate3("TitleFieldTemplate", registry, uiOptions);
-  const DescriptionFieldTemplate = getTemplate3(
+  const uiOptions = getUiOptions4(uiSchema);
+  const TitleFieldTemplate = getTemplate4("TitleFieldTemplate", registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate4(
     "DescriptionFieldTemplate",
     registry,
     uiOptions
@@ -457,8 +460,8 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    title && /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+    title && /* @__PURE__ */ jsx16(
       TitleFieldTemplate,
       {
         id: titleId(idSchema),
@@ -469,7 +472,7 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    description && /* @__PURE__ */ jsx12(
+    description && /* @__PURE__ */ jsx16(
       DescriptionFieldTemplate,
       {
         id: descriptionId(idSchema),
@@ -479,14 +482,15 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsxs6(Grid2, { gap: description ? 2 : 6, mb: 4, children: [
+    /* @__PURE__ */ jsxs9(Grid3, { gap: description ? 2 : 6, mb: 4, children: [
       properties.map(
-        (element, index) => element.hidden ? element.content : /* @__PURE__ */ jsx12(GridItem2, { children: element.content }, `${idSchema.$id}-${element.name}-${index}`)
+        (element, index) => element.hidden ? element.content : /* @__PURE__ */ jsx16(GridItem3, { children: element.content }, `${idSchema.$id}-${element.name}-${index}`)
       ),
-      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx12(GridItem2, { justifySelf: "flex-end", children: /* @__PURE__ */ jsx12(
+      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx16(GridItem3, { justifySelf: "flex-end", children: /* @__PURE__ */ jsx16(
         AddButton2,
         {
-          className: "object-property-expand",
+          id: buttonId2(idSchema, "add"),
+          className: "rjsf-object-property-expand",
           onClick: onAddClick(schema),
           disabled: disabled || readonly,
           uiSchema,
@@ -500,35 +504,36 @@ function ObjectFieldTemplate(props) {
 // src/SubmitButton/SubmitButton.tsx
 import { Box as Box3, Button as Button2 } from "@chakra-ui/react";
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx13(Box3, { marginTop: 3, children: /* @__PURE__ */ jsx13(Button2, { type: "submit", variant: "solid", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ jsx17(Box3, { marginTop: 3, children: /* @__PURE__ */ jsx17(Button2, { type: "submit", variant: "solid", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
-import { Box as Box4, Divider, Heading } from "@chakra-ui/react";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Box as Box4, Separator, Heading } from "@chakra-ui/react";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function TitleField({
   id,
   title
 }) {
-  return /* @__PURE__ */ jsxs7(Box4, { id, mt: 1, mb: 4, children: [
-    /* @__PURE__ */ jsx14(Heading, { as: "h5", children: title }),
-    /* @__PURE__ */ jsx14(Divider, {})
+  return /* @__PURE__ */ jsxs10(Box4, { id, mt: 1, mb: 4, children: [
+    /* @__PURE__ */ jsx18(Heading, { as: "h5", children: title }),
+    /* @__PURE__ */ jsx18(Separator, {})
   ] });
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
 import {
   ADDITIONAL_PROPERTY_FLAG,
+  buttonId as buttonId3,
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
-import { FormControl as FormControl3, FormLabel as FormLabel2, Grid as Grid3, GridItem as GridItem3, Input as Input2 } from "@chakra-ui/react";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Grid as Grid4, GridItem as GridItem4, Input as Input2 } from "@chakra-ui/react";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate(props) {
   const {
     children,
@@ -550,29 +555,28 @@ function WrapIfAdditionalTemplate(props) {
   const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
   if (!additional) {
-    return /* @__PURE__ */ jsx15("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx19("div", { className: classNames, style, children });
   }
   const handleBlur = ({ target }) => onKeyChange(target.value);
-  return /* @__PURE__ */ jsxs8(Grid3, { className: classNames, style, alignItems: "center", gap: 2, children: [
-    /* @__PURE__ */ jsx15(GridItem3, { children: /* @__PURE__ */ jsxs8(FormControl3, { isRequired: required, children: [
-      /* @__PURE__ */ jsx15(FormLabel2, { htmlFor: `${id}-key`, id: `${id}-key-label`, children: keyLabel }),
-      /* @__PURE__ */ jsx15(
-        Input2,
-        {
-          defaultValue: label,
-          disabled: disabled || readonly,
-          id: `${id}-key`,
-          name: `${id}-key`,
-          onBlur: !readonly ? handleBlur : void 0,
-          type: "text",
-          mb: 1
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx15(GridItem3, { children }),
-    /* @__PURE__ */ jsx15(GridItem3, { children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11(Grid4, { className: classNames, style, alignItems: "center", gap: 2, children: [
+    /* @__PURE__ */ jsx19(GridItem4, { children: /* @__PURE__ */ jsx19(Field, { required, label: keyLabel, children: /* @__PURE__ */ jsx19(
+      Input2,
+      {
+        defaultValue: label,
+        disabled: disabled || readonly,
+        id: `${id}-key`,
+        name: `${id}-key`,
+        onBlur: !readonly ? handleBlur : void 0,
+        type: "text",
+        mb: 1
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx19(GridItem4, { children }),
+    /* @__PURE__ */ jsx19(GridItem4, { children: /* @__PURE__ */ jsx19(
       RemoveButton2,
       {
+        id: buttonId3(id, "remove"),
+        className: "rjsf-object-property-remove",
         disabled: disabled || readonly,
         onClick: onDropPropertyClick(label),
         uiSchema,
@@ -601,6 +605,7 @@ function generateTemplates() {
     FieldErrorTemplate,
     FieldHelpTemplate,
     FieldTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
@@ -619,11 +624,11 @@ import {
   TranslatableString as TranslatableString5
 } from "@rjsf/utils";
 import { Box as Box5, Button as Button3 } from "@chakra-ui/react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function DateElement(props) {
   const { SelectWidget: SelectWidget2 } = props.registry.widgets;
   const value = props.value ? props.value : void 0;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx20(
     SelectWidget2,
     {
       ...props,
@@ -676,15 +681,15 @@ function AltDateWidget(props) {
     }
     onChange(void 0);
   };
-  return /* @__PURE__ */ jsxs9(Box5, { children: [
-    /* @__PURE__ */ jsx16(Box5, { display: "flex", flexWrap: "wrap", alignItems: "center", children: getDateElementProps(
+  return /* @__PURE__ */ jsxs12(Box5, { children: [
+    /* @__PURE__ */ jsx20(Box5, { display: "flex", flexWrap: "wrap", alignItems: "center", children: getDateElementProps(
       state,
       showTime,
       options.yearsRange,
       options.format
     ).map((elemProps, i) => {
       const elemId = id + "_" + elemProps.type;
-      return /* @__PURE__ */ jsx16(Box5, { mr: "2", mb: "2", children: /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx20(Box5, { mr: "2", mb: "2", children: /* @__PURE__ */ jsx20(
         DateElement,
         {
           ...props,
@@ -702,9 +707,9 @@ function AltDateWidget(props) {
         }
       ) }, elemId);
     }) }),
-    /* @__PURE__ */ jsxs9(Box5, { display: "flex", children: [
-      !options.hideNowButton && /* @__PURE__ */ jsx16(Button3, { onClick: (e) => handleNow(e), mr: "2", children: translateString(TranslatableString5.NowLabel) }),
-      !options.hideClearButton && /* @__PURE__ */ jsx16(Button3, { onClick: (e) => handleClear(e), children: translateString(TranslatableString5.ClearLabel) })
+    /* @__PURE__ */ jsxs12(Box5, { display: "flex", children: [
+      !options.hideNowButton && /* @__PURE__ */ jsx20(Button3, { onClick: (e) => handleNow(e), mr: "2", children: translateString(TranslatableString5.NowLabel) }),
+      !options.hideClearButton && /* @__PURE__ */ jsx20(Button3, { onClick: (e) => handleClear(e), children: translateString(TranslatableString5.ClearLabel) })
     ] })
   ] });
 }
@@ -720,10 +725,10 @@ AltDateWidget.defaultProps = {
 var AltDateWidget_default = AltDateWidget;
 
 // src/AltDateTimeWidget/AltDateTimeWidget.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function AltDateTimeWidget(props) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ jsx17(AltDateWidget2, { ...props, showTime: true });
+  return /* @__PURE__ */ jsx21(AltDateWidget2, { ...props, showTime: true });
 }
 AltDateTimeWidget.defaultProps = {
   ...AltDateWidget_default.defaultProps,
@@ -732,15 +737,30 @@ AltDateTimeWidget.defaultProps = {
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
 // src/CheckboxWidget/CheckboxWidget.tsx
-import { Checkbox, FormControl as FormControl4, Text as Text3 } from "@chakra-ui/react";
+import { Text as Text4 } from "@chakra-ui/react";
 import {
   ariaDescribedByIds as ariaDescribedByIds3,
   descriptionId as descriptionId2,
-  getTemplate as getTemplate4,
+  getTemplate as getTemplate5,
   labelValue as labelValue2,
   schemaRequiresTrueValue
 } from "@rjsf/utils";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// src/components/ui/checkbox.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+var Checkbox = forwardRef4(function Checkbox2(props, ref) {
+  const { icon, children, inputProps, rootRef, ...rest } = props;
+  return /* @__PURE__ */ jsxs13(ChakraCheckbox.Root, { ref: rootRef, ...rest, children: [
+    /* @__PURE__ */ jsx22(ChakraCheckbox.HiddenInput, { ref, ...inputProps }),
+    /* @__PURE__ */ jsx22(ChakraCheckbox.Control, { children: icon || /* @__PURE__ */ jsx22(ChakraCheckbox.Indicator, {}) }),
+    children != null && /* @__PURE__ */ jsx22(ChakraCheckbox.Label, { children })
+  ] });
+});
+
+// src/CheckboxWidget/CheckboxWidget.tsx
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
@@ -757,19 +777,18 @@ function CheckboxWidget(props) {
     uiSchema,
     schema
   } = props;
-  const chakraProps = getChakra({ uiSchema });
   const required = schemaRequiresTrueValue(schema);
-  const DescriptionFieldTemplate = getTemplate4(
+  const DescriptionFieldTemplate = getTemplate5(
     "DescriptionFieldTemplate",
     registry,
     options
   );
   const description = options.description || schema.description;
-  const _onChange = ({ target: { checked } }) => onChange(checked);
+  const _onChange = ({ checked }) => onChange(checked);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsxs10(FormControl4, { mb: 1, ...chakraProps, isRequired: required, children: [
-    !hideLabel && !!description && /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs14(Field, { mb: 1, required, children: [
+    !hideLabel && description && /* @__PURE__ */ jsx23(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -779,34 +798,33 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx23(
       Checkbox,
       {
         id,
         name: id,
-        isChecked: typeof value === "undefined" ? false : value,
-        isDisabled: disabled || readonly,
-        onChange: _onChange,
+        checked: typeof value === "undefined" ? false : value,
+        disabled: disabled || readonly,
+        onCheckedChange: _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
         "aria-describedby": ariaDescribedByIds3(id),
-        children: labelValue2(/* @__PURE__ */ jsx18(Text3, { children: label }), hideLabel || !label)
+        children: labelValue2(/* @__PURE__ */ jsx23(Text4, { children: label }), hideLabel || !label)
       }
     )
   ] });
 }
 
 // src/CheckboxesWidget/CheckboxesWidget.tsx
-import { CheckboxGroup, Checkbox as Checkbox2, FormLabel as FormLabel3, FormControl as FormControl5, Text as Text4, Stack } from "@chakra-ui/react";
+import { CheckboxGroup, FieldsetRoot, Stack, Text as Text5 } from "@chakra-ui/react";
 import {
   ariaDescribedByIds as ariaDescribedByIds4,
   enumOptionsIndexForValue,
-  enumOptionsIsSelected,
   enumOptionsValueForIndex,
   labelValue as labelValue3,
   optionId
 } from "@rjsf/utils";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function CheckboxesWidget(props) {
   const {
     id,
@@ -820,63 +838,44 @@ function CheckboxesWidget(props) {
     required,
     label,
     hideLabel,
-    uiSchema,
     rawErrors = []
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const chakraProps = getChakra({ uiSchema });
-  const checkboxesValues = Array.isArray(value) ? value : [value];
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   const row = options ? options.inline : false;
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
-  return /* @__PURE__ */ jsxs11(
-    FormControl5,
+  return /* @__PURE__ */ jsx24(FieldsetRoot, { mb: 1, disabled: disabled || readonly, invalid: rawErrors && rawErrors.length > 0, children: /* @__PURE__ */ jsx24(
+    CheckboxGroup,
     {
-      mb: 1,
-      ...chakraProps,
-      isDisabled: disabled || readonly,
-      isRequired: required,
-      isReadOnly: readonly,
-      isInvalid: rawErrors && rawErrors.length > 0,
-      children: [
-        labelValue3(
-          /* @__PURE__ */ jsx19(FormLabel3, { htmlFor: id, id: `${id}-label`, children: label }),
-          hideLabel || !label
-        ),
-        /* @__PURE__ */ jsx19(
-          CheckboxGroup,
+      onValueChange: (option) => onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue)),
+      value: selectedIndexes,
+      "aria-describedby": ariaDescribedByIds4(id),
+      readOnly: readonly,
+      required,
+      label: labelValue3(label, hideLabel || !label),
+      children: /* @__PURE__ */ jsx24(Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+        const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+        return /* @__PURE__ */ jsx24(
+          Checkbox,
           {
-            onChange: (option) => onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue)),
-            defaultValue: selectedIndexes,
-            "aria-describedby": ariaDescribedByIds4(id),
-            children: /* @__PURE__ */ jsx19(Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-              const checked = enumOptionsIsSelected(option.value, checkboxesValues);
-              const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-              return /* @__PURE__ */ jsx19(
-                Checkbox2,
-                {
-                  id: optionId(id, index),
-                  name: id,
-                  value: String(index),
-                  isChecked: checked,
-                  isDisabled: disabled || itemDisabled || readonly,
-                  onBlur: _onBlur,
-                  onFocus: _onFocus,
-                  children: option.label && /* @__PURE__ */ jsx19(Text4, { children: option.label })
-                },
-                index
-              );
-            }) })
-          }
-        )
-      ]
+            id: optionId(id, index),
+            name: id,
+            value: String(index),
+            disabled: disabled || itemDisabled || readonly,
+            onBlur: _onBlur,
+            onFocus: _onFocus,
+            children: option.label && /* @__PURE__ */ jsx24(Text5, { children: option.label })
+          },
+          index
+        );
+      }) })
     }
-  );
+  ) });
 }
 
 // src/RadioWidget/RadioWidget.tsx
-import { FormControl as FormControl6, FormLabel as FormLabel4, Radio, RadioGroup, Stack as Stack2 } from "@chakra-ui/react";
+import { Stack as Stack2 } from "@chakra-ui/react";
 import {
   ariaDescribedByIds as ariaDescribedByIds5,
   enumOptionsIndexForValue as enumOptionsIndexForValue2,
@@ -884,7 +883,23 @@ import {
   labelValue as labelValue4,
   optionId as optionId2
 } from "@rjsf/utils";
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+
+// src/components/ui/radio.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+var Radio = forwardRef5(function Radio2(props, ref) {
+  const { children, inputProps, rootRef, ...rest } = props;
+  return /* @__PURE__ */ jsxs15(ChakraRadioGroup.Item, { ref: rootRef, ...rest, children: [
+    /* @__PURE__ */ jsx25(ChakraRadioGroup.ItemHiddenInput, { ref, ...inputProps }),
+    /* @__PURE__ */ jsx25(ChakraRadioGroup.ItemIndicator, {}),
+    children && /* @__PURE__ */ jsx25(ChakraRadioGroup.ItemText, { children })
+  ] });
+});
+var RadioGroup = ChakraRadioGroup.Root;
+
+// src/RadioWidget/RadioWidget.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
 function RadioWidget({
   id,
   options,
@@ -896,56 +911,101 @@ function RadioWidget({
   hideLabel,
   onChange,
   onBlur,
-  onFocus,
-  uiSchema
+  onFocus
 }) {
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const chakraProps = getChakra({ uiSchema });
-  const _onChange = (nextValue) => onChange(enumOptionsValueForIndex2(nextValue, enumOptions, emptyValue));
+  const _onChange = ({ target: { value: value2 } }) => onChange(enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
   const _onBlur = ({ target: { value: value2 } }) => onBlur(id, enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
   const _onFocus = ({ target: { value: value2 } }) => onFocus(id, enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
   const row = options ? options.inline : false;
   const selectedIndex = enumOptionsIndexForValue2(value, enumOptions) ?? null;
-  return /* @__PURE__ */ jsxs12(FormControl6, { mb: 1, ...chakraProps, isDisabled: disabled || readonly, isRequired: required, isReadOnly: readonly, children: [
-    labelValue4(
-      /* @__PURE__ */ jsx20(FormLabel4, { htmlFor: id, id: `${id}-label`, children: label }),
-      hideLabel || !label
-    ),
-    /* @__PURE__ */ jsx20(
-      RadioGroup,
-      {
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
-        value: selectedIndex,
-        name: id,
-        "aria-describedby": ariaDescribedByIds5(id),
-        children: /* @__PURE__ */ jsx20(Stack2, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          return /* @__PURE__ */ jsx20(
-            Radio,
-            {
-              value: String(index),
-              id: optionId2(id, index),
-              disabled: disabled || itemDisabled || readonly,
-              children: option.label
-            },
-            index
-          );
-        }) })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx26(
+    Field,
+    {
+      mb: 1,
+      disabled: disabled || readonly,
+      required,
+      readOnly: readonly,
+      label: labelValue4(label, hideLabel || !label),
+      children: /* @__PURE__ */ jsx26(
+        RadioGroup,
+        {
+          onChange: _onChange,
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+          value: selectedIndex,
+          name: id,
+          "aria-describedby": ariaDescribedByIds5(id),
+          children: /* @__PURE__ */ jsx26(Stack2, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            return /* @__PURE__ */ jsx26(
+              Radio,
+              {
+                value: String(index),
+                id: optionId2(id, index),
+                disabled: disabled || itemDisabled || readonly,
+                children: option.label
+              },
+              index
+            );
+          }) })
+        }
+      )
+    }
+  );
 }
 
 // src/RangeWidget/RangeWidget.tsx
-import { FormControl as FormControl7, FormLabel as FormLabel5, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from "@chakra-ui/react";
 import {
   ariaDescribedByIds as ariaDescribedByIds6,
   labelValue as labelValue5,
   rangeSpec
 } from "@rjsf/utils";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+
+// src/components/ui/slider.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { Slider as ChakraSlider, HStack as HStack2 } from "@chakra-ui/react";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+var Slider = forwardRef6(function Slider2(props, ref) {
+  const { marks: marksProp, showValue, ...rest } = props;
+  const value = props.defaultValue ?? props.value;
+  const marks = marksProp?.map((mark) => {
+    if (typeof mark === "number") {
+      return { value: mark, label: void 0 };
+    }
+    return mark;
+  });
+  const hasMarkLabel = !!marks?.some((mark) => mark.label);
+  return /* @__PURE__ */ jsxs16(ChakraSlider.Root, { ref, width: "200px", thumbAlignment: "center", ...rest, children: [
+    showValue && /* @__PURE__ */ jsx27(HStack2, { justify: "space-between", children: /* @__PURE__ */ jsx27(ChakraSlider.ValueText, {}) }),
+    /* @__PURE__ */ jsxs16(ChakraSlider.Control, { "data-has-mark-label": hasMarkLabel || void 0, children: [
+      /* @__PURE__ */ jsx27(ChakraSlider.Track, { children: /* @__PURE__ */ jsx27(ChakraSlider.Range, {}) }),
+      /* @__PURE__ */ jsx27(SliderThumbs, { value }),
+      /* @__PURE__ */ jsx27(SliderMarks, { marks })
+    ] })
+  ] });
+});
+function SliderThumbs(props) {
+  const { value } = props;
+  return /* @__PURE__ */ jsx27(Fragment2, { children: value?.map((_, index) => /* @__PURE__ */ jsx27(ChakraSlider.Thumb, { index, children: /* @__PURE__ */ jsx27(ChakraSlider.HiddenInput, {}) }, index)) });
+}
+var SliderMarks = forwardRef6(function SliderMarks2(props, ref) {
+  const { marks } = props;
+  if (!marks?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx27(ChakraSlider.MarkerGroup, { ref, children: marks.map((mark, index) => {
+    const value = typeof mark === "number" ? mark : mark.value;
+    const label = typeof mark === "number" ? void 0 : mark.label;
+    return /* @__PURE__ */ jsxs16(ChakraSlider.Marker, { value, children: [
+      /* @__PURE__ */ jsx27(ChakraSlider.MarkerIndicator, {}),
+      label
+    ] }, index);
+  }) });
+});
+
+// src/RangeWidget/RangeWidget.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
 function RangeWidget({
   value,
   readonly,
@@ -954,50 +1014,104 @@ function RangeWidget({
   onFocus,
   options,
   schema,
-  uiSchema,
   onChange,
   label,
   hideLabel,
   id
 }) {
-  const chakraProps = getChakra({ uiSchema });
-  const sliderWidgetProps = { value, label, id, ...rangeSpec(schema) };
-  const _onChange = (value2) => onChange(value2 === void 0 ? options.emptyValue : value2);
+  const _onChange = ({ value: value2 }) => onChange(value2 === void 0 ? options.emptyValue : value2[0]);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsxs13(FormControl7, { mb: 1, ...chakraProps, children: [
-    labelValue5(/* @__PURE__ */ jsx21(FormLabel5, { htmlFor: id, children: label }), hideLabel || !label),
-    /* @__PURE__ */ jsxs13(
-      Slider,
-      {
-        ...sliderWidgetProps,
-        id,
-        name: id,
-        isDisabled: disabled || readonly,
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
-        "aria-describedby": ariaDescribedByIds6(id),
-        children: [
-          /* @__PURE__ */ jsx21(SliderTrack, { children: /* @__PURE__ */ jsx21(SliderFilledTrack, {}) }),
-          /* @__PURE__ */ jsx21(SliderThumb, {})
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx28(Field, { mb: 1, label: labelValue5(label, hideLabel || !label), children: /* @__PURE__ */ jsx28(
+    Slider,
+    {
+      ...rangeSpec(schema),
+      id,
+      name: id,
+      disabled: disabled || readonly,
+      value: [value],
+      onValueChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      "aria-describedby": ariaDescribedByIds6(id)
+    }
+  ) });
 }
 
 // src/SelectWidget/SelectWidget.tsx
-import { useMemo as useMemo2 } from "react";
-import { FormControl as FormControl8, FormLabel as FormLabel6 } from "@chakra-ui/react";
+import { useMemo, useRef } from "react";
 import {
   ariaDescribedByIds as ariaDescribedByIds7,
   enumOptionsIndexForValue as enumOptionsIndexForValue3,
   enumOptionsValueForIndex as enumOptionsValueForIndex3,
   labelValue as labelValue6
 } from "@rjsf/utils";
-import { Select } from "chakra-react-select";
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { createListCollection, Select as ChakraSelect2 } from "@chakra-ui/react";
+
+// src/components/ui/select.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { Select as ChakraSelect, Portal } from "@chakra-ui/react";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+var SelectTrigger = forwardRef7(function SelectTrigger2(props, ref) {
+  const { children, clearable, ...rest } = props;
+  return /* @__PURE__ */ jsxs17(ChakraSelect.Control, { ...rest, children: [
+    /* @__PURE__ */ jsx29(ChakraSelect.Trigger, { ref, children }),
+    /* @__PURE__ */ jsxs17(ChakraSelect.IndicatorGroup, { children: [
+      clearable && /* @__PURE__ */ jsx29(SelectClearTrigger, {}),
+      /* @__PURE__ */ jsx29(ChakraSelect.Indicator, {})
+    ] })
+  ] });
+});
+var SelectClearTrigger = forwardRef7(
+  function SelectClearTrigger2(props, ref) {
+    return /* @__PURE__ */ jsx29(ChakraSelect.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsx29(CloseButton, { size: "xs", variant: "plain", focusVisibleRing: "inside", focusRingWidth: "2px", pointerEvents: "auto" }) });
+  }
+);
+var SelectContent = forwardRef7(function SelectContent2(props, ref) {
+  const { portalled = true, portalRef, ...rest } = props;
+  return /* @__PURE__ */ jsx29(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx29(ChakraSelect.Positioner, { children: /* @__PURE__ */ jsx29(ChakraSelect.Content, { ...rest, ref }) }) });
+});
+var SelectItem = forwardRef7(function SelectItem2(props, ref) {
+  const { item, children, ...rest } = props;
+  return /* @__PURE__ */ jsxs17(ChakraSelect.Item, { item, ...rest, ref, children: [
+    children,
+    /* @__PURE__ */ jsx29(ChakraSelect.ItemIndicator, {})
+  ] }, item.value);
+});
+var SelectValueText = forwardRef7(function SelectValueText2(props, ref) {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx29(ChakraSelect.ValueText, { ...rest, ref, children: /* @__PURE__ */ jsx29(ChakraSelect.Context, { children: (select) => {
+    const items = select.selectedItems;
+    if (items.length === 0) {
+      return props.placeholder;
+    }
+    if (children) {
+      return children(items);
+    }
+    if (items.length === 1) {
+      return select.collection.stringifyItem(items[0]);
+    }
+    return `${items.length} selected`;
+  } }) });
+});
+var SelectRoot = forwardRef7(function SelectRoot2(props, ref) {
+  return /* @__PURE__ */ jsx29(ChakraSelect.Root, { ...props, ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? props.children : /* @__PURE__ */ jsxs17(Fragment3, { children: [
+    /* @__PURE__ */ jsx29(ChakraSelect.HiddenSelect, {}),
+    props.children
+  ] }) });
+});
+var SelectItemGroup = forwardRef7(function SelectItemGroup2(props, ref) {
+  const { children, label, ...rest } = props;
+  return /* @__PURE__ */ jsxs17(ChakraSelect.ItemGroup, { ...rest, ref, children: [
+    /* @__PURE__ */ jsx29(ChakraSelect.ItemGroupLabel, { children: label }),
+    children
+  ] });
+});
+var SelectLabel = ChakraSelect.Label;
+var SelectItemText = ChakraSelect.ItemText;
+
+// src/SelectWidget/SelectWidget.tsx
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function SelectWidget(props) {
   const {
     id,
@@ -1015,29 +1129,27 @@ function SelectWidget(props) {
     onBlur,
     onFocus,
     rawErrors = [],
-    uiSchema,
     schema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const chakraProps = getChakra({ uiSchema });
-  const _onMultiChange = (e) => {
+  const _onMultiChange = ({ value: value2 }) => {
     return onChange(
       enumOptionsValueForIndex3(
-        e.map((v) => {
-          return v.value;
+        value2.map((item) => {
+          return item;
         }),
         enumOptions,
         emptyValue
       )
     );
   };
-  const _onChange = (e) => {
-    return onChange(enumOptionsValueForIndex3(e.value, enumOptions, emptyValue));
+  const _onChange = ({ value: value2 }) => {
+    return onChange(enumOptionsValueForIndex3(value2, enumOptions, emptyValue));
   };
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  const { valueLabelMap, displayEnumOptions } = useMemo2(() => {
+  const { valueLabelMap, displayEnumOptions } = useMemo(() => {
     const valueLabelMap2 = {};
     let displayEnumOptions2 = [];
     if (Array.isArray(enumOptions)) {
@@ -1047,7 +1159,7 @@ function SelectWidget(props) {
         return {
           label: label2,
           value: String(index),
-          isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1
+          disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1
         };
       });
       if (showPlaceholderOption) {
@@ -1058,58 +1170,164 @@ function SelectWidget(props) {
   }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
   const isMultiple = typeof multiple !== "undefined" && multiple !== false && Boolean(enumOptions);
   const selectedIndex = enumOptionsIndexForValue3(value, enumOptions, isMultiple);
-  const formValue = isMultiple ? (selectedIndex || []).map((i) => {
+  const getMultiValue = () => (selectedIndex || []).map((i) => {
     return {
       label: valueLabelMap[i],
-      value: i
+      value: i.toString()
     };
-  }) : {
-    label: valueLabelMap[selectedIndex] || "",
-    selectedIndex
+  });
+  const getSingleValue = () => typeof selectedIndex !== "undefined" ? [
+    {
+      label: valueLabelMap[selectedIndex] || "",
+      value: selectedIndex.toString()
+    }
+  ] : [];
+  const formValue = (isMultiple ? getMultiValue() : getSingleValue()).map((item) => item.value);
+  const selectOptions = createListCollection({
+    items: displayEnumOptions.filter((item) => item.value)
+  });
+  const containerRef = useRef(null);
+  return /* @__PURE__ */ jsx30(
+    Field,
+    {
+      ref: containerRef,
+      mb: 1,
+      disabled: disabled || readonly,
+      required,
+      readOnly: readonly,
+      invalid: rawErrors && rawErrors.length > 0,
+      label: labelValue6(label, hideLabel || !label),
+      position: "relative",
+      children: /* @__PURE__ */ jsxs18(
+        SelectRoot,
+        {
+          collection: selectOptions,
+          id,
+          name: id,
+          multiple: isMultiple,
+          closeOnSelect: !isMultiple,
+          onBlur: _onBlur,
+          onValueChange: isMultiple ? _onMultiChange : _onChange,
+          onFocus: _onFocus,
+          autoFocus: autofocus,
+          value: formValue,
+          "aria-describedby": ariaDescribedByIds7(id),
+          positioning: { placement: "bottom" },
+          children: [
+            /* @__PURE__ */ jsx30(ChakraSelect2.Control, { children: /* @__PURE__ */ jsx30(SelectTrigger, { children: /* @__PURE__ */ jsx30(SelectValueText, { placeholder }) }) }),
+            /* @__PURE__ */ jsx30(ChakraSelect2.Positioner, { minWidth: "100% !important", zIndex: "2 !important", top: "calc(100% + 5px) !important", children: /* @__PURE__ */ jsx30(ChakraSelect2.Content, { children: selectOptions.items.map((item) => /* @__PURE__ */ jsxs18(ChakraSelect2.Item, { item, children: [
+              item.label,
+              /* @__PURE__ */ jsx30(ChakraSelect2.ItemIndicator, {})
+            ] }, item.value)) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/SelectNativeWidget/NativeSelectWidget.tsx
+import { useMemo as useMemo2 } from "react";
+import {
+  ariaDescribedByIds as ariaDescribedByIds8,
+  enumOptionsIndexForValue as enumOptionsIndexForValue4,
+  enumOptionsValueForIndex as enumOptionsValueForIndex4,
+  labelValue as labelValue7
+} from "@rjsf/utils";
+import { createListCollection as createListCollection2, NativeSelect as ChakraSelect3 } from "@chakra-ui/react";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+function NativeSelectWidget(props) {
+  const {
+    id,
+    options,
+    label,
+    hideLabel,
+    placeholder,
+    multiple,
+    required,
+    disabled,
+    readonly,
+    value,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    rawErrors = [],
+    schema
+  } = props;
+  const { enumOptions, enumDisabled, emptyValue } = options;
+  const _onChange = ({ target }) => {
+    return onChange(enumOptionsValueForIndex4(target && target.value, enumOptions, emptyValue));
   };
-  return /* @__PURE__ */ jsxs14(
-    FormControl8,
+  const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex4(target && target.value, enumOptions, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex4(target && target.value, enumOptions, emptyValue));
+  const showPlaceholderOption = !multiple && schema.default === void 0;
+  const { valueLabelMap, displayEnumOptions } = useMemo2(() => {
+    const valueLabelMap2 = {};
+    let displayEnumOptions2 = [];
+    if (Array.isArray(enumOptions)) {
+      displayEnumOptions2 = enumOptions.map((option, index) => {
+        const { value: value2, label: label2 } = option;
+        valueLabelMap2[index] = label2 || String(value2);
+        return {
+          label: label2,
+          value: String(index),
+          disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1
+        };
+      });
+      if (showPlaceholderOption) {
+        displayEnumOptions2.unshift({ value: "", label: placeholder || "" });
+      }
+    }
+    return { valueLabelMap: valueLabelMap2, displayEnumOptions: displayEnumOptions2 };
+  }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
+  const selectedIndex = enumOptionsIndexForValue4(value, enumOptions, false);
+  const getSingleValue = () => typeof selectedIndex !== "undefined" ? [
+    {
+      label: valueLabelMap[selectedIndex] || "",
+      value: selectedIndex.toString()
+    }
+  ] : [];
+  const formValue = getSingleValue()[0]?.value || "";
+  const selectOptions = createListCollection2({
+    items: displayEnumOptions.filter((item) => item.value)
+  });
+  return /* @__PURE__ */ jsx31(
+    Field,
     {
       mb: 1,
-      ...chakraProps,
-      isDisabled: disabled || readonly,
-      isRequired: required,
-      isReadOnly: readonly,
-      isInvalid: rawErrors && rawErrors.length > 0,
-      children: [
-        labelValue6(
-          /* @__PURE__ */ jsx22(FormLabel6, { htmlFor: id, id: `${id}-label`, children: label }),
-          hideLabel || !label
-        ),
-        /* @__PURE__ */ jsx22(
-          Select,
+      disabled: disabled || readonly,
+      required,
+      readOnly: readonly,
+      invalid: rawErrors && rawErrors.length > 0,
+      label: labelValue7(label, hideLabel || !label),
+      children: /* @__PURE__ */ jsxs19(ChakraSelect3.Root, { children: [
+        /* @__PURE__ */ jsx31(
+          ChakraSelect3.Field,
           {
-            inputId: id,
-            name: id,
-            isMulti: isMultiple,
-            options: displayEnumOptions,
-            placeholder,
-            closeMenuOnSelect: !isMultiple,
+            id,
             onBlur: _onBlur,
-            onChange: isMultiple ? _onMultiChange : _onChange,
+            onChange: _onChange,
             onFocus: _onFocus,
             autoFocus: autofocus,
             value: formValue,
-            "aria-describedby": ariaDescribedByIds7(id)
+            "aria-describedby": ariaDescribedByIds8(id),
+            children: selectOptions.items.map((item) => /* @__PURE__ */ jsx31("option", { value: item.value, children: item.label }, item.value))
           }
-        )
-      ]
+        ),
+        /* @__PURE__ */ jsx31(ChakraSelect3.Indicator, {})
+      ] })
     }
   );
 }
 
 // src/TextareaWidget/TextareaWidget.tsx
-import { FormControl as FormControl9, FormLabel as FormLabel7, Textarea } from "@chakra-ui/react";
+import { Textarea } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds8,
-  labelValue as labelValue7
+  ariaDescribedByIds as ariaDescribedByIds9,
+  labelValue as labelValue8
 } from "@rjsf/utils";
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function TextareaWidget({
   id,
   placeholder,
@@ -1123,95 +1341,94 @@ function TextareaWidget({
   onFocus,
   onChange,
   options,
-  uiSchema,
   required,
   rawErrors
 }) {
-  const chakraProps = getChakra({ uiSchema });
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsxs15(
-    FormControl9,
+  return /* @__PURE__ */ jsx32(
+    Field,
     {
       mb: 1,
-      ...chakraProps,
-      isDisabled: disabled || readonly,
-      isRequired: required,
-      isReadOnly: readonly,
-      isInvalid: rawErrors && rawErrors.length > 0,
-      children: [
-        labelValue7(/* @__PURE__ */ jsx23(FormLabel7, { htmlFor: id, children: label }), hideLabel || !label),
-        /* @__PURE__ */ jsx23(
-          Textarea,
-          {
-            id,
-            name: id,
-            value: value ?? "",
-            placeholder,
-            autoFocus: autofocus,
-            onChange: _onChange,
-            onBlur: _onBlur,
-            onFocus: _onFocus,
-            rows: options.rows,
-            "aria-describedby": ariaDescribedByIds8(id)
-          }
-        )
-      ]
+      disabled: disabled || readonly,
+      required,
+      readOnly: readonly,
+      invalid: rawErrors && rawErrors.length > 0,
+      label: labelValue8(label, hideLabel || !label),
+      children: /* @__PURE__ */ jsx32(
+        Textarea,
+        {
+          id,
+          name: id,
+          value: value ?? "",
+          placeholder,
+          autoFocus: autofocus,
+          onChange: _onChange,
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+          rows: options.rows,
+          "aria-describedby": ariaDescribedByIds9(id)
+        }
+      )
     }
   );
 }
 
 // src/UpDownWidget/UpDownWidget.tsx
 import {
-  NumberInput,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInputField,
-  NumberInputStepper,
-  FormControl as FormControl10,
-  FormLabel as FormLabel8
-} from "@chakra-ui/react";
-import {
-  ariaDescribedByIds as ariaDescribedByIds9,
-  labelValue as labelValue8
+  ariaDescribedByIds as ariaDescribedByIds10,
+  labelValue as labelValue9
 } from "@rjsf/utils";
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// src/components/ui/number-input.tsx
+import { forwardRef as forwardRef8, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { NumberInput as ChakraNumberInput } from "@chakra-ui/react";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+var NumberInputRoot = forwardRef8(function NumberInput(props, ref) {
+  const inputRef = useRef2(null);
+  useEffect2(() => {
+    if (inputRef.current) {
+      inputRef.current.value = props.value || "";
+    }
+  }, [props.value]);
+  return /* @__PURE__ */ jsxs20(ChakraNumberInput.Root, { ref, variant: "outline", ...props, children: [
+    /* @__PURE__ */ jsxs20(ChakraNumberInput.Control, { children: [
+      /* @__PURE__ */ jsx33(ChakraNumberInput.IncrementTrigger, {}),
+      /* @__PURE__ */ jsx33(ChakraNumberInput.DecrementTrigger, {})
+    ] }),
+    /* @__PURE__ */ jsx33(ChakraNumberInput.Input, { ref: inputRef })
+  ] });
+});
+
+// src/UpDownWidget/UpDownWidget.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
 function UpDownWidget(props) {
-  const { id, uiSchema, readonly, disabled, label, hideLabel, value, onChange, onBlur, onFocus, rawErrors, required } = props;
-  const chakraProps = getChakra({ uiSchema });
-  const _onChange = (value2) => onChange(value2);
+  const { id, readonly, disabled, label, hideLabel, value, onChange, onBlur, onFocus, rawErrors, required } = props;
+  const _onChange = ({ value: value2 }) => onChange(value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsxs16(
-    FormControl10,
+  return /* @__PURE__ */ jsx34(
+    Field,
     {
       mb: 1,
-      ...chakraProps,
-      isDisabled: disabled || readonly,
-      isRequired: required,
-      isReadOnly: readonly,
-      isInvalid: rawErrors && rawErrors.length > 0,
-      children: [
-        labelValue8(/* @__PURE__ */ jsx24(FormLabel8, { htmlFor: id, children: label }), hideLabel || !label),
-        /* @__PURE__ */ jsxs16(
-          NumberInput,
-          {
-            value: value ?? "",
-            onChange: _onChange,
-            onBlur: _onBlur,
-            onFocus: _onFocus,
-            "aria-describedby": ariaDescribedByIds9(id),
-            children: [
-              /* @__PURE__ */ jsx24(NumberInputField, { id, name: id }),
-              /* @__PURE__ */ jsxs16(NumberInputStepper, { children: [
-                /* @__PURE__ */ jsx24(NumberIncrementStepper, {}),
-                /* @__PURE__ */ jsx24(NumberDecrementStepper, {})
-              ] })
-            ]
-          }
-        )
-      ]
+      disabled: disabled || readonly,
+      required,
+      readOnly: readonly,
+      invalid: rawErrors && rawErrors.length > 0,
+      label: labelValue9(label, hideLabel || !label),
+      children: /* @__PURE__ */ jsx34(
+        NumberInputRoot,
+        {
+          value,
+          onValueChange: _onChange,
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+          "aria-describedby": ariaDescribedByIds10(id),
+          id,
+          name: id
+        }
+      )
     }
   );
 }
@@ -1226,6 +1443,7 @@ function generateWidgets() {
     RadioWidget,
     RangeWidget,
     SelectWidget,
+    NativeSelectWidget,
     TextareaWidget,
     UpDownWidget
   };
@@ -1251,281 +1469,25 @@ var Form_default = generateForm();
 import { CacheProvider } from "@emotion/react";
 import createCache from "@emotion/cache";
 import weakMemoize from "@emotion/weak-memoize";
-import { ChakraProvider } from "@chakra-ui/react";
-
-// src/CssReset.tsx
-import { Global } from "@emotion/react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var CSSReset = () => /* @__PURE__ */ jsx25(
-  Global,
-  {
-    styles: `
-      html {
-        line-height: 1.5;
-        -webkit-text-size-adjust: 100%;
-        font-family: system-ui, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        text-rendering: optimizeLegibility;
-        -moz-osx-font-smoothing: grayscale;
-        touch-action: manipulation;
-      }
-      body {
-        position: relative;
-        min-height: 100%;
-        font-feature-settings: 'kern';
-      }
-      *,
-      *::before,
-      *::after {
-        border-width: 0;
-        border-style: solid;
-        box-sizing: border-box;
-      }
-      main {
-        display: block;
-      }
-      hr {
-        border-top-width: 1px;
-        box-sizing: content-box;
-        height: 0;
-        overflow: visible;
-      }
-      pre,
-      code,
-      kbd,
-      samp {
-        font-family: SFMono-Regular,  Menlo, Monaco, Consolas, monospace;
-        font-size: 1em;
-      }
-      a {
-        background-color: transparent;
-        color: inherit;
-        text-decoration: inherit;
-      }
-      abbr[title] {
-        border-bottom: none;
-        text-decoration: underline;
-        -webkit-text-decoration: underline dotted;
-        text-decoration: underline dotted;
-      }
-      b,
-      strong {
-        font-weight: bold;
-      }
-      small {
-        font-size: 80%;
-      }
-      sub,
-      sup {
-        font-size: 75%;
-        line-height: 0;
-        position: relative;
-        vertical-align: baseline;
-      }
-      sub {
-        bottom: -0.25em;
-      }
-      sup {
-        top: -0.5em;
-      }
-      img {
-        border-style: none;
-      }
-      button,
-      input,
-      optgroup,
-      select,
-      textarea {
-        font-family: inherit;
-        font-size: 100%;
-        line-height: 1.15;
-        margin: 0;
-      }
-      button,
-      input {
-        overflow: visible;
-      }
-      button,
-      select {
-        text-transform: none;
-      }
-      button::-moz-focus-inner,
-      [type="button"]::-moz-focus-inner,
-      [type="reset"]::-moz-focus-inner,
-      [type="submit"]::-moz-focus-inner {
-        border-style: none;
-        padding: 0;
-      }
-      fieldset {
-        padding: 0.35em 0.75em 0.625em;
-      }
-      legend {
-        box-sizing: border-box;
-        color: inherit;
-        display: table;
-        max-width: 100%;
-        padding: 0;
-        white-space: normal;
-      }
-      progress {
-        vertical-align: baseline;
-      }
-      textarea {
-        overflow: auto;
-      }
-      [type="checkbox"],
-      [type="radio"] {
-        box-sizing: border-box;
-        padding: 0;
-      }
-      [type="number"]::-webkit-inner-spin-button,
-      [type="number"]::-webkit-outer-spin-button {
-        -webkit-appearance: none !important;
-      }
-      input[type="number"] {
-        -moz-appearance: textfield;
-      }
-      [type="search"] {
-        -webkit-appearance: textfield;
-        outline-offset: -2px;
-      }
-      [type="search"]::-webkit-search-decoration {
-        -webkit-appearance: none !important;
-      }
-      ::-webkit-file-upload-button {
-        -webkit-appearance: button;
-        font: inherit;
-      }
-      details {
-        display: block;
-      }
-      summary {
-        display: list-item;
-      }
-      template {
-        display: none;
-      }
-      [hidden] {
-        display: none !important;
-      }
-      body,
-      blockquote,
-      dl,
-      dd,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      hr,
-      figure,
-      p,
-      pre {
-        margin: 0;
-      }
-      button {
-        background: transparent;
-        padding: 0;
-      }
-      fieldset {
-        margin: 0;
-        padding: 0;
-      }
-      ol,
-      ul {
-        margin: 0;
-        padding: 0;
-      }
-      textarea {
-        resize: vertical;
-      }
-      button,
-      [role="button"] {
-        cursor: pointer;
-      }
-      button::-moz-focus-inner {
-        border: 0 !important;
-      }
-      table {
-        border-collapse: collapse;
-      }
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        font-size: inherit;
-        font-weight: inherit;
-      }
-      button,
-      input,
-      optgroup,
-      select,
-      textarea {
-        padding: 0;
-        line-height: inherit;
-        color: inherit;
-      }
-      img,
-      svg,
-      video,
-      canvas,
-      audio,
-      iframe,
-      embed,
-      object {
-        display: block;
-      }
-      img,
-      video {
-        max-width: 100%;
-        height: auto;
-      }
-      [data-js-focus-visible] :focus:not([data-focus-visible-added]) {
-        outline: none;
-        box-shadow: none;
-      }
-      select::-ms-expand {
-        display: none;
-      }
-      input {
-        border-width: revert;
-        border-color: revert;
-        border-style: revert;
-      }
-      .array-item > hr {
-        margin-top: 16px;
-        margin-bottom: 16px;
-      }
-    `
-  }
-);
-var CssReset_default = CSSReset;
-
-// src/ChakraFrameProvider.tsx
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var memoizedCreateCacheWithContainer = weakMemoize((container) => {
   const newCache = createCache({ container, key: "rjsf" });
   return newCache;
 });
 var __createChakraFrameProvider = (props) => ({ document }) => {
-  return /* @__PURE__ */ jsx26("div", { style: { margin: 2 }, children: /* @__PURE__ */ jsx26(CacheProvider, { value: memoizedCreateCacheWithContainer(document.head), children: /* @__PURE__ */ jsxs17(ChakraProvider, { resetCSS: false, children: [
-    /* @__PURE__ */ jsx26(CssReset_default, {}),
-    props.children
-  ] }) }) });
+  return /* @__PURE__ */ jsx35("div", { style: { margin: 2 }, children: /* @__PURE__ */ jsx35(CacheProvider, { value: memoizedCreateCacheWithContainer(document.head), children: /* @__PURE__ */ jsx35(ChakraProvider, { value: defaultSystem, children: props.children }) }) });
 };
 
 // src/index.ts
-var src_default = Form_default;
+var index_default = Form_default;
 export {
   Form_default as Form,
   Templates_default as Templates,
   Theme_default as Theme,
   Widgets_default as Widgets,
   __createChakraFrameProvider,
-  src_default as default,
+  index_default as default,
   generateForm,
   generateTemplates,
   generateTheme,