@rjsf/chakra-ui 5.11.2 → 5.12.0

package/dist/chakra-ui.cjs.development.js

@@ -1,1657 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@rjsf/core');
-var jsxRuntime = require('react/jsx-runtime');
-var utils = require('@rjsf/utils');
-var react = require('@chakra-ui/react');
-var icons = require('@chakra-ui/icons');
-var react$1 = require('react');
-var chakraReactSelect = require('chakra-react-select');
-var react$2 = require('@emotion/react');
-var createCache = require('@emotion/cache');
-var weakMemoize = require('@emotion/weak-memoize');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var createCache__default = /*#__PURE__*/_interopDefaultLegacy(createCache);
-var weakMemoize__default = /*#__PURE__*/_interopDefaultLegacy(weakMemoize);
-
-function AddButton({
-  uiSchema,
-  registry,
-  ...props
-}) {
-  const {
-    translateString
-  } = registry;
-  return jsxRuntime.jsx(react.Button, {
-    leftIcon: jsxRuntime.jsx(icons.AddIcon, {}),
-    ...props,
-    children: translateString(utils.TranslatableString.AddItemButton)
-  });
-}
-
-function ArrayFieldItemTemplate(props) {
-  const {
-    children,
-    disabled,
-    hasToolbar,
-    hasCopy,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
-    readonly,
-    uiSchema,
-    registry
-  } = props;
-  const {
-    CopyButton,
-    MoveDownButton,
-    MoveUpButton,
-    RemoveButton
-  } = registry.templates.ButtonTemplates;
-  const onCopyClick = react$1.useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-  const onRemoveClick = react$1.useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
-  const onArrowUpClick = react$1.useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-  const onArrowDownClick = react$1.useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
-  return jsxRuntime.jsxs(react.HStack, {
-    alignItems: 'flex-end',
-    py: 1,
-    children: [jsxRuntime.jsx(react.Box, {
-      w: '100%',
-      children: children
-    }), hasToolbar && jsxRuntime.jsx(react.Box, {
-      children: jsxRuntime.jsxs(react.ButtonGroup, {
-        isAttached: true,
-        mb: 1,
-        children: [(hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveUpButton, {
-          disabled: disabled || readonly || !hasMoveUp,
-          onClick: onArrowUpClick,
-          uiSchema: uiSchema,
-          registry: registry
-        }), (hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveDownButton, {
-          disabled: disabled || readonly || !hasMoveDown,
-          onClick: onArrowDownClick,
-          uiSchema: uiSchema,
-          registry: registry
-        }), hasCopy && jsxRuntime.jsx(CopyButton, {
-          disabled: disabled || readonly,
-          onClick: onCopyClick,
-          uiSchema: uiSchema,
-          registry: registry
-        }), hasRemove && jsxRuntime.jsx(RemoveButton, {
-          disabled: disabled || readonly,
-          onClick: onRemoveClick,
-          uiSchema: uiSchema,
-          registry: registry
-        })]
-      })
-    })]
-  });
-}
-
-function ArrayFieldTemplate(props) {
-  const {
-    canAdd,
-    disabled,
-    idSchema,
-    uiSchema,
-    items,
-    onAddClick,
-    readonly,
-    registry,
-    required,
-    schema,
-    title
-  } = props;
-  const uiOptions = utils.getUiOptions(uiSchema);
-  const ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
-  const ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
-  const ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
-  // Button templates are not overridden in the uiSchema
-  const {
-    ButtonTemplates: {
-      AddButton
-    }
-  } = registry.templates;
-  return jsxRuntime.jsxs(react.Box, {
-    children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
-      idSchema: idSchema,
-      title: uiOptions.title || title,
-      schema: schema,
-      uiSchema: uiSchema,
-      required: required,
-      registry: registry
-    }), jsxRuntime.jsx(ArrayFieldDescriptionTemplate, {
-      idSchema: idSchema,
-      description: uiOptions.description || schema.description,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    }), jsxRuntime.jsxs(react.Grid, {
-      children: [jsxRuntime.jsx(react.GridItem, {
-        children: items.length > 0 && items.map(({
-          key,
-          ...itemProps
-        }) => jsxRuntime.jsx(ArrayFieldItemTemplate, {
-          ...itemProps
-        }, key))
-      }), canAdd && jsxRuntime.jsx(react.GridItem, {
-        justifySelf: 'flex-end',
-        children: jsxRuntime.jsx(react.Box, {
-          mt: 2,
-          children: jsxRuntime.jsx(AddButton, {
-            className: 'array-item-add',
-            onClick: onAddClick,
-            disabled: disabled || readonly,
-            uiSchema: uiSchema,
-            registry: registry
-          })
-        })
-      })]
-    }, `array-item-list-${idSchema.$id}`)]
-  });
-}
-
-function getChakra({
-  uiSchema = {}
-}) {
-  const chakraProps = uiSchema['ui:options'] && uiSchema['ui:options'].chakra || {};
-  Object.keys(chakraProps).forEach(key => {
-    /**
-     * Leveraging `shouldForwardProp` to remove props
-     *
-     * This is a utility function that's used in `@chakra-ui/react`'s factory function.
-     * Normally, it prevents ChakraProps from being passed to the DOM.
-     * In this case we just want to delete the unknown props. So we flip the boolean.
-     */
-    if (react.shouldForwardProp(key)) {
-      delete chakraProps[key];
-    }
-  });
-  return chakraProps;
-}
-
-function BaseInputTemplate(props) {
-  const {
-    id,
-    type,
-    value,
-    label,
-    hideLabel,
-    schema,
-    uiSchema,
-    onChange,
-    onChangeOverride,
-    onBlur,
-    onFocus,
-    options,
-    required,
-    readonly,
-    rawErrors,
-    autofocus,
-    placeholder,
-    disabled
-  } = props;
-  const inputProps = utils.getInputProps(schema, type, options);
-  const chakraProps = getChakra({
-    uiSchema
-  });
-  const _onChange = ({
-    target: {
-      value
-    }
-  }) => onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({
-    target: {
-      value
-    }
-  }) => onBlur(id, value);
-  const _onFocus = ({
-    target: {
-      value
-    }
-  }) => onFocus(id, value);
-  return jsxRuntime.jsxs(react.FormControl, {
-    mb: 1,
-    ...chakraProps,
-    isDisabled: disabled || readonly,
-    isRequired: required,
-    isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0,
-    children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
-      htmlFor: id,
-      id: `${id}-label`,
-      children: label
-    }), hideLabel || !label), jsxRuntime.jsx(react.Input, {
-      id: id,
-      name: id,
-      value: value || value === 0 ? value : '',
-      onChange: onChangeOverride || _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      autoFocus: autofocus,
-      placeholder: placeholder,
-      ...inputProps,
-      list: schema.examples ? utils.examplesId(id) : undefined,
-      "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
-    }), Array.isArray(schema.examples) ? jsxRuntime.jsx("datalist", {
-      id: utils.examplesId(id),
-      children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map(example => {
-        return jsxRuntime.jsx("option", {
-          value: example
-        }, example);
-      })
-    }) : null]
-  });
-}
-
-function DescriptionField({
-  description,
-  id
-}) {
-  if (!description) {
-    return null;
-  }
-  if (typeof description === 'string') {
-    return jsxRuntime.jsx(react.Text, {
-      id: id,
-      mt: 2,
-      mb: 4,
-      children: description
-    });
-  }
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: description
-  });
-}
-
-function ErrorList({
-  errors,
-  registry
-}) {
-  const {
-    translateString
-  } = registry;
-  return jsxRuntime.jsxs(react.Alert, {
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    gap: 3,
-    status: 'error',
-    children: [jsxRuntime.jsx(react.AlertTitle, {
-      children: translateString(utils.TranslatableString.ErrorsLabel)
-    }), jsxRuntime.jsx(react.List, {
-      children: errors.map((error, i) => jsxRuntime.jsxs(react.ListItem, {
-        children: [jsxRuntime.jsx(react.ListIcon, {
-          as: icons.WarningIcon,
-          color: 'red.500'
-        }), error.stack]
-      }, i))
-    })]
-  });
-}
-
-function ChakraIconButton(props) {
-  const {
-    icon,
-    iconType,
-    uiSchema,
-    registry,
-    ...otherProps
-  } = props;
-  return jsxRuntime.jsx(react.IconButton, {
-    "aria-label": props.title,
-    ...otherProps,
-    icon: icon
-  });
-}
-ChakraIconButton.displayName = 'ChakraIconButton';
-var ChakraIconButton$1 = /*#__PURE__*/react$1.memo(ChakraIconButton);
-
-function CopyButton(props) {
-  const {
-    registry: {
-      translateString
-    }
-  } = props;
-  return jsxRuntime.jsx(ChakraIconButton$1, {
-    title: translateString(utils.TranslatableString.CopyButton),
-    ...props,
-    icon: jsxRuntime.jsx(icons.CopyIcon, {})
-  });
-}
-function MoveDownButton(props) {
-  const {
-    registry: {
-      translateString
-    }
-  } = props;
-  return jsxRuntime.jsx(ChakraIconButton$1, {
-    title: translateString(utils.TranslatableString.MoveDownButton),
-    ...props,
-    icon: jsxRuntime.jsx(icons.ArrowDownIcon, {})
-  });
-}
-function MoveUpButton(props) {
-  const {
-    registry: {
-      translateString
-    }
-  } = props;
-  return jsxRuntime.jsx(ChakraIconButton$1, {
-    title: translateString(utils.TranslatableString.MoveUpButton),
-    ...props,
-    icon: jsxRuntime.jsx(icons.ArrowUpIcon, {})
-  });
-}
-function RemoveButton(props) {
-  const {
-    registry: {
-      translateString
-    }
-  } = props;
-  return jsxRuntime.jsx(ChakraIconButton$1, {
-    title: translateString(utils.TranslatableString.RemoveButton),
-    ...props,
-    icon: jsxRuntime.jsx(icons.DeleteIcon, {})
-  });
-}
-
-/** The `FieldErrorTemplate` component renders the errors local to the particular field
- *
- * @param props - The `FieldErrorProps` for the errors being rendered
- */
-function FieldErrorTemplate(props) {
-  const {
-    errors = [],
-    idSchema
-  } = props;
-  if (errors.length === 0) {
-    return null;
-  }
-  const id = utils.errorId(idSchema);
-  return jsxRuntime.jsx(react.List, {
-    children: errors.map((error, i) => {
-      return jsxRuntime.jsx(react.ListItem, {
-        children: jsxRuntime.jsx(react.FormErrorMessage, {
-          id: id,
-          children: error
-        })
-      }, i);
-    })
-  });
-}
-
-/** The `FieldHelpTemplate` component renders any help desired for a field
- *
- * @param props - The `FieldHelpProps` to be rendered
- */
-function FieldHelpTemplate(props) {
-  const {
-    idSchema,
-    help
-  } = props;
-  if (!help) {
-    return null;
-  }
-  const id = utils.helpId(idSchema);
-  return jsxRuntime.jsx(react.FormHelperText, {
-    id: id,
-    children: help
-  });
-}
-
-function FieldTemplate(props) {
-  const {
-    id,
-    children,
-    classNames,
-    style,
-    disabled,
-    displayLabel,
-    hidden,
-    label,
-    onDropPropertyClick,
-    onKeyChange,
-    readonly,
-    registry,
-    required,
-    rawErrors = [],
-    errors,
-    help,
-    description,
-    rawDescription,
-    schema,
-    uiSchema
-  } = props;
-  const uiOptions = utils.getUiOptions(uiSchema);
-  const WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
-  if (hidden) {
-    return jsxRuntime.jsx("div", {
-      style: {
-        display: 'none'
-      },
-      children: children
-    });
-  }
-  return jsxRuntime.jsx(WrapIfAdditionalTemplate, {
-    classNames: classNames,
-    style: style,
-    disabled: disabled,
-    id: id,
-    label: label,
-    onDropPropertyClick: onDropPropertyClick,
-    onKeyChange: onKeyChange,
-    readonly: readonly,
-    required: required,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry,
-    children: jsxRuntime.jsxs(react.FormControl, {
-      isRequired: required,
-      isInvalid: rawErrors && rawErrors.length > 0,
-      children: [children, displayLabel && rawDescription ? jsxRuntime.jsx(react.Text, {
-        mt: 2,
-        children: description
-      }) : null, errors, help]
-    })
-  });
-}
-
-function ObjectFieldTemplate(props) {
-  const {
-    description,
-    title,
-    properties,
-    required,
-    disabled,
-    readonly,
-    uiSchema,
-    idSchema,
-    schema,
-    formData,
-    onAddClick,
-    registry
-  } = props;
-  const uiOptions = utils.getUiOptions(uiSchema);
-  const TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
-  const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
-  // Button templates are not overridden in the uiSchema
-  const {
-    ButtonTemplates: {
-      AddButton
-    }
-  } = registry.templates;
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [title && jsxRuntime.jsx(TitleFieldTemplate, {
-      id: utils.titleId(idSchema),
-      title: title,
-      required: required,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    }), description && jsxRuntime.jsx(DescriptionFieldTemplate, {
-      id: utils.descriptionId(idSchema),
-      description: description,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    }), jsxRuntime.jsxs(react.Grid, {
-      gap: description ? 2 : 6,
-      mb: 4,
-      children: [properties.map((element, index) => element.hidden ? element.content : jsxRuntime.jsx(react.GridItem, {
-        children: element.content
-      }, `${idSchema.$id}-${element.name}-${index}`)), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(react.GridItem, {
-        justifySelf: 'flex-end',
-        children: jsxRuntime.jsx(AddButton, {
-          className: 'object-property-expand',
-          onClick: onAddClick(schema),
-          disabled: disabled || readonly,
-          uiSchema: uiSchema,
-          registry: registry
-        })
-      })]
-    })]
-  });
-}
-
-function SubmitButton({
-  uiSchema
-}) {
-  const {
-    submitText,
-    norender,
-    props: submitButtonProps
-  } = utils.getSubmitButtonOptions(uiSchema);
-  if (norender) {
-    return null;
-  }
-  return jsxRuntime.jsx(react.Box, {
-    marginTop: 3,
-    children: jsxRuntime.jsx(react.Button, {
-      type: 'submit',
-      variant: 'solid',
-      ...submitButtonProps,
-      children: submitText
-    })
-  });
-}
-
-function TitleField({
-  id,
-  title
-}) {
-  return jsxRuntime.jsxs(react.Box, {
-    id: id,
-    mt: 1,
-    mb: 4,
-    children: [jsxRuntime.jsx(react.Heading, {
-      as: 'h5',
-      children: title
-    }), jsxRuntime.jsx(react.Divider, {})]
-  });
-}
-
-function WrapIfAdditionalTemplate(props) {
-  const {
-    children,
-    classNames,
-    style,
-    disabled,
-    id,
-    label,
-    onDropPropertyClick,
-    onKeyChange,
-    readonly,
-    registry,
-    required,
-    schema,
-    uiSchema
-  } = props;
-  const {
-    templates,
-    translateString
-  } = registry;
-  // Button templates are not overridden in the uiSchema
-  const {
-    RemoveButton
-  } = templates.ButtonTemplates;
-  const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
-  const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
-  if (!additional) {
-    return jsxRuntime.jsx("div", {
-      className: classNames,
-      style: style,
-      children: children
-    });
-  }
-  const handleBlur = ({
-    target
-  }) => onKeyChange(target.value);
-  return jsxRuntime.jsxs(react.Grid, {
-    className: classNames,
-    style: style,
-    alignItems: 'center',
-    gap: 2,
-    children: [jsxRuntime.jsx(react.GridItem, {
-      children: jsxRuntime.jsxs(react.FormControl, {
-        isRequired: required,
-        children: [jsxRuntime.jsx(react.FormLabel, {
-          htmlFor: `${id}-key`,
-          id: `${id}-key-label`,
-          children: keyLabel
-        }), jsxRuntime.jsx(react.Input, {
-          defaultValue: label,
-          disabled: disabled || readonly,
-          id: `${id}-key`,
-          name: `${id}-key`,
-          onBlur: !readonly ? handleBlur : undefined,
-          type: 'text',
-          mb: 1
-        })]
-      })
-    }), jsxRuntime.jsx(react.GridItem, {
-      children: children
-    }), jsxRuntime.jsx(react.GridItem, {
-      children: jsxRuntime.jsx(RemoveButton, {
-        disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
-        uiSchema: uiSchema,
-        registry: registry
-      })
-    })]
-  }, `${id}-key`);
-}
-
-function generateTemplates() {
-  return {
-    ArrayFieldItemTemplate,
-    ArrayFieldTemplate,
-    BaseInputTemplate,
-    ButtonTemplates: {
-      CopyButton,
-      AddButton,
-      MoveDownButton,
-      MoveUpButton,
-      RemoveButton,
-      SubmitButton
-    },
-    DescriptionFieldTemplate: DescriptionField,
-    ErrorListTemplate: ErrorList,
-    FieldErrorTemplate,
-    FieldHelpTemplate,
-    FieldTemplate,
-    ObjectFieldTemplate,
-    TitleFieldTemplate: TitleField,
-    WrapIfAdditionalTemplate
-  };
-}
-var Templates = /*#__PURE__*/generateTemplates();
-
-const rangeOptions = (start, stop) => {
-  const options = [];
-  for (let i = start; i <= stop; i++) {
-    options.push({
-      value: i,
-      label: utils.pad(i, 2)
-    });
-  }
-  return options;
-};
-function DateElement(props) {
-  const {
-    SelectWidget
-  } = props.registry.widgets;
-  const value = props.value ? props.value : undefined;
-  return jsxRuntime.jsx(SelectWidget, {
-    ...props,
-    label: '',
-    className: 'form-control',
-    onChange: elemValue => props.select(props.type, elemValue),
-    options: {
-      enumOptions: rangeOptions(props.range[0], props.range[1])
-    },
-    placeholder: props.type,
-    schema: {
-      type: 'integer'
-    },
-    value: value,
-    "aria-describedby": utils.ariaDescribedByIds(props.name)
-  });
-}
-const readyForChange = state => {
-  return Object.keys(state).every(key => typeof state[key] !== 'undefined' && state[key] !== -1);
-};
-function AltDateWidget(props) {
-  const {
-    autofocus,
-    disabled,
-    id,
-    onBlur,
-    onChange,
-    onFocus,
-    options,
-    readonly,
-    registry,
-    showTime,
-    value
-  } = props;
-  const {
-    translateString
-  } = registry;
-  const [state, setState] = react$1.useState(utils.parseDateString(value, showTime));
-  react$1.useEffect(() => {
-    setState(utils.parseDateString(value, showTime));
-  }, [showTime, value]);
-  const handleChange = (property, nextValue) => {
-    const nextState = {
-      ...state,
-      [property]: typeof nextValue === 'undefined' ? -1 : nextValue
-    };
-    if (readyForChange(nextState)) {
-      onChange(utils.toDateString(nextState, showTime));
-    } else {
-      setState(nextState);
-    }
-  };
-  const handleNow = event => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    const nextState = utils.parseDateString(new Date().toJSON(), showTime);
-    onChange(utils.toDateString(nextState, showTime));
-  };
-  const handleClear = event => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    onChange(undefined);
-  };
-  const dateElementProps = () => {
-    const {
-      year,
-      month,
-      day,
-      hour,
-      minute,
-      second
-    } = state;
-    const data = [{
-      type: 'year',
-      range: options.yearsRange,
-      value: year
-    }, {
-      type: 'month',
-      range: [1, 12],
-      value: month
-    }, {
-      type: 'day',
-      range: [1, 31],
-      value: day
-    }];
-    if (showTime) {
-      data.push({
-        type: 'hour',
-        range: [0, 23],
-        value: hour
-      }, {
-        type: 'minute',
-        range: [0, 59],
-        value: minute
-      }, {
-        type: 'second',
-        range: [0, 59],
-        value: second
-      });
-    }
-    return data;
-  };
-  return jsxRuntime.jsxs(react.Box, {
-    children: [jsxRuntime.jsx(react.Box, {
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-      children: dateElementProps().map((elemProps, i) => {
-        const elemId = id + '_' + elemProps.type;
-        return jsxRuntime.jsx(react.Box, {
-          mr: '2',
-          mb: '2',
-          children: jsxRuntime.jsx(DateElement, {
-            ...props,
-            ...elemProps,
-            autofocus: autofocus && i === 0,
-            disabled: disabled,
-            id: elemId,
-            name: id,
-            onBlur: onBlur,
-            onFocus: onFocus,
-            readonly: readonly,
-            registry: registry,
-            select: handleChange,
-            value: elemProps.value < 0 ? '' : elemProps.value
-          })
-        }, elemId);
-      })
-    }), jsxRuntime.jsxs(react.Box, {
-      display: 'flex',
-      children: [!options.hideNowButton && jsxRuntime.jsx(react.Button, {
-        onClick: e => handleNow(e),
-        mr: '2',
-        children: translateString(utils.TranslatableString.NowLabel)
-      }), !options.hideClearButton && jsxRuntime.jsx(react.Button, {
-        onClick: e => handleClear(e),
-        children: translateString(utils.TranslatableString.ClearLabel)
-      })]
-    })]
-  });
-}
-AltDateWidget.defaultProps = {
-  autofocus: false,
-  disabled: false,
-  readonly: false,
-  showTime: false,
-  options: {
-    yearsRange: [1900, /*#__PURE__*/new Date().getFullYear() + 2]
-  }
-};
-
-function AltDateTimeWidget(props) {
-  const {
-    AltDateWidget
-  } = props.registry.widgets;
-  return jsxRuntime.jsx(AltDateWidget, {
-    ...props,
-    showTime: true
-  });
-}
-AltDateTimeWidget.defaultProps = {
-  ...AltDateWidget.defaultProps,
-  showTime: true
-};
-
-function CheckboxWidget(props) {
-  const {
-    id,
-    value,
-    disabled,
-    readonly,
-    onChange,
-    onBlur,
-    onFocus,
-    label,
-    hideLabel,
-    registry,
-    options,
-    uiSchema,
-    schema
-  } = props;
-  const chakraProps = getChakra({
-    uiSchema
-  });
-  // Because an unchecked checkbox will cause html5 validation to fail, only add
-  // the "required" attribute if the field value must be "true", due to the
-  // "const" or "enum" keywords
-  const required = utils.schemaRequiresTrueValue(schema);
-  const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
-  const description = options.description || schema.description;
-  const _onChange = ({
-    target: {
-      checked
-    }
-  }) => onChange(checked);
-  const _onBlur = ({
-    target: {
-      value
-    }
-  }) => onBlur(id, value);
-  const _onFocus = ({
-    target: {
-      value
-    }
-  }) => onFocus(id, value);
-  return jsxRuntime.jsxs(react.FormControl, {
-    mb: 1,
-    ...chakraProps,
-    isRequired: required,
-    children: [!hideLabel && !!description && jsxRuntime.jsx(DescriptionFieldTemplate, {
-      id: utils.descriptionId(id),
-      description: description,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    }), jsxRuntime.jsx(react.Checkbox, {
-      id: id,
-      name: id,
-      isChecked: typeof value === 'undefined' ? false : value,
-      isDisabled: disabled || readonly,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      "aria-describedby": utils.ariaDescribedByIds(id),
-      children: utils.labelValue(jsxRuntime.jsx(react.Text, {
-        children: label
-      }), hideLabel || !label)
-    })]
-  });
-}
-
-function CheckboxesWidget(props) {
-  const {
-    id,
-    disabled,
-    options,
-    value,
-    readonly,
-    onChange,
-    onBlur,
-    onFocus,
-    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: {
-      value
-    }
-  }) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  const _onFocus = ({
-    target: {
-      value
-    }
-  }) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  const row = options ? options.inline : false;
-  const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
-  return jsxRuntime.jsxs(react.FormControl, {
-    mb: 1,
-    ...chakraProps,
-    isDisabled: disabled || readonly,
-    isRequired: required,
-    isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0,
-    children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
-      htmlFor: id,
-      id: `${id}-label`,
-      children: label
-    }), hideLabel || !label), jsxRuntime.jsx(react.CheckboxGroup, {
-      onChange: option => onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue)),
-      defaultValue: selectedIndexes,
-      "aria-describedby": utils.ariaDescribedByIds(id),
-      children: jsxRuntime.jsx(react.Stack, {
-        direction: row ? 'row' : 'column',
-        children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-          const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
-          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          return jsxRuntime.jsx(react.Checkbox, {
-            id: utils.optionId(id, index),
-            name: id,
-            value: String(index),
-            isChecked: checked,
-            isDisabled: disabled || itemDisabled || readonly,
-            onBlur: _onBlur,
-            onFocus: _onFocus,
-            children: option.label && jsxRuntime.jsx(react.Text, {
-              children: option.label
-            })
-          }, index);
-        })
-      })
-    })]
-  });
-}
-
-function RadioWidget({
-  id,
-  options,
-  value,
-  required,
-  disabled,
-  readonly,
-  label,
-  hideLabel,
-  onChange,
-  onBlur,
-  onFocus,
-  uiSchema
-}) {
-  const {
-    enumOptions,
-    enumDisabled,
-    emptyValue
-  } = options;
-  const chakraProps = getChakra({
-    uiSchema
-  });
-  const _onChange = nextValue => onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
-  const _onBlur = ({
-    target: {
-      value
-    }
-  }) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  const _onFocus = ({
-    target: {
-      value
-    }
-  }) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  const row = options ? options.inline : false;
-  const selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions) ?? null;
-  return jsxRuntime.jsxs(react.FormControl, {
-    mb: 1,
-    ...chakraProps,
-    isDisabled: disabled || readonly,
-    isRequired: required,
-    isReadOnly: readonly,
-    children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
-      htmlFor: id,
-      id: `${id}-label`,
-      children: label
-    }), hideLabel || !label), jsxRuntime.jsx(react.RadioGroup, {
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      value: selectedIndex,
-      name: id,
-      "aria-describedby": utils.ariaDescribedByIds(id),
-      children: jsxRuntime.jsx(react.Stack, {
-        direction: row ? 'row' : 'column',
-        children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          return jsxRuntime.jsx(react.Radio, {
-            value: String(index),
-            id: utils.optionId(id, index),
-            disabled: disabled || itemDisabled || readonly,
-            children: option.label
-          }, index);
-        })
-      })
-    })]
-  });
-}
-
-function RangeWidget({
-  value,
-  readonly,
-  disabled,
-  onBlur,
-  onFocus,
-  options,
-  schema,
-  uiSchema,
-  onChange,
-  label,
-  hideLabel,
-  id
-}) {
-  const chakraProps = getChakra({
-    uiSchema
-  });
-  const sliderWidgetProps = {
-    value,
-    label,
-    id,
-    ...utils.rangeSpec(schema)
-  };
-  const _onChange = value => onChange(value === undefined ? options.emptyValue : value);
-  const _onBlur = ({
-    target: {
-      value
-    }
-  }) => onBlur(id, value);
-  const _onFocus = ({
-    target: {
-      value
-    }
-  }) => onFocus(id, value);
-  return jsxRuntime.jsxs(react.FormControl, {
-    mb: 1,
-    ...chakraProps,
-    children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
-      htmlFor: id,
-      children: label
-    }), hideLabel || !label), jsxRuntime.jsxs(react.Slider, {
-      ...sliderWidgetProps,
-      id: id,
-      name: id,
-      isDisabled: disabled || readonly,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      "aria-describedby": utils.ariaDescribedByIds(id),
-      children: [jsxRuntime.jsx(react.SliderTrack, {
-        children: jsxRuntime.jsx(react.SliderFilledTrack, {})
-      }), jsxRuntime.jsx(react.SliderThumb, {})]
-    })]
-  });
-}
-
-function SelectWidget(props) {
-  const {
-    id,
-    options,
-    label,
-    hideLabel,
-    placeholder,
-    multiple,
-    required,
-    disabled,
-    readonly,
-    value,
-    autofocus,
-    onChange,
-    onBlur,
-    onFocus,
-    rawErrors = [],
-    uiSchema
-  } = props;
-  const {
-    enumOptions,
-    enumDisabled,
-    emptyValue
-  } = options;
-  const chakraProps = getChakra({
-    uiSchema
-  });
-  const _onMultiChange = e => {
-    return onChange(utils.enumOptionsValueForIndex(e.map(v => {
-      return v.value;
-    }), enumOptions, emptyValue));
-  };
-  const _onChange = e => {
-    return onChange(utils.enumOptionsValueForIndex(e.value, enumOptions, emptyValue));
-  };
-  const _onBlur = ({
-    target: {
-      value
-    }
-  }) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  const _onFocus = ({
-    target: {
-      value
-    }
-  }) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  const _valueLabelMap = {};
-  const displayEnumOptions = Array.isArray(enumOptions) ? enumOptions.map((option, index) => {
-    const {
-      value,
-      label
-    } = option;
-    _valueLabelMap[index] = label || String(value);
-    return {
-      label,
-      value: String(index),
-      isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1
-    };
-  }) : [];
-  const isMultiple = typeof multiple !== 'undefined' && Boolean(enumOptions);
-  const selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions, isMultiple);
-  const formValue = isMultiple ? (selectedIndex || []).map(i => {
-    return {
-      label: _valueLabelMap[i],
-      value: i
-    };
-  }) : {
-    label: _valueLabelMap[selectedIndex] || '',
-    selectedIndex
-  };
-  return jsxRuntime.jsxs(react.FormControl, {
-    mb: 1,
-    ...chakraProps,
-    isDisabled: disabled || readonly,
-    isRequired: required,
-    isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0,
-    children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
-      htmlFor: id,
-      id: `${id}-label`,
-      children: label
-    }), hideLabel || !label), jsxRuntime.jsx(chakraReactSelect.Select, {
-      inputId: id,
-      name: id,
-      isMulti: isMultiple,
-      options: displayEnumOptions,
-      placeholder: placeholder,
-      closeMenuOnSelect: !isMultiple,
-      onBlur: _onBlur,
-      onChange: isMultiple ? _onMultiChange : _onChange,
-      onFocus: _onFocus,
-      autoFocus: autofocus,
-      value: formValue,
-      "aria-describedby": utils.ariaDescribedByIds(id)
-    })]
-  });
-}
-
-function TextareaWidget({
-  id,
-  placeholder,
-  value,
-  label,
-  hideLabel,
-  disabled,
-  autofocus,
-  readonly,
-  onBlur,
-  onFocus,
-  onChange,
-  options,
-  uiSchema,
-  required,
-  rawErrors
-}) {
-  const chakraProps = getChakra({
-    uiSchema
-  });
-  const _onChange = ({
-    target: {
-      value
-    }
-  }) => onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({
-    target: {
-      value
-    }
-  }) => onBlur(id, value);
-  const _onFocus = ({
-    target: {
-      value
-    }
-  }) => onFocus(id, value);
-  return jsxRuntime.jsxs(react.FormControl, {
-    mb: 1,
-    ...chakraProps,
-    isDisabled: disabled || readonly,
-    isRequired: required,
-    isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0,
-    children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
-      htmlFor: id,
-      children: label
-    }), hideLabel || !label), jsxRuntime.jsx(react.Textarea, {
-      id: id,
-      name: id,
-      value: value ?? '',
-      placeholder: placeholder,
-      autoFocus: autofocus,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      "aria-describedby": utils.ariaDescribedByIds(id)
-    })]
-  });
-}
-
-function UpDownWidget(props) {
-  const {
-    id,
-    uiSchema,
-    readonly,
-    disabled,
-    label,
-    hideLabel,
-    value,
-    onChange,
-    onBlur,
-    onFocus,
-    rawErrors,
-    required
-  } = props;
-  const chakraProps = getChakra({
-    uiSchema
-  });
-  const _onChange = value => onChange(value);
-  const _onBlur = ({
-    target: {
-      value
-    }
-  }) => onBlur(id, value);
-  const _onFocus = ({
-    target: {
-      value
-    }
-  }) => onFocus(id, value);
-  return jsxRuntime.jsxs(react.FormControl, {
-    mb: 1,
-    ...chakraProps,
-    isDisabled: disabled || readonly,
-    isRequired: required,
-    isReadOnly: readonly,
-    isInvalid: rawErrors && rawErrors.length > 0,
-    children: [utils.labelValue(jsxRuntime.jsx(react.FormLabel, {
-      htmlFor: id,
-      children: label
-    }), hideLabel || !label), jsxRuntime.jsxs(react.NumberInput, {
-      value: value ?? '',
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      "aria-describedby": utils.ariaDescribedByIds(id),
-      children: [jsxRuntime.jsx(react.NumberInputField, {
-        id: id,
-        name: id
-      }), jsxRuntime.jsxs(react.NumberInputStepper, {
-        children: [jsxRuntime.jsx(react.NumberIncrementStepper, {}), jsxRuntime.jsx(react.NumberDecrementStepper, {})]
-      })]
-    })]
-  });
-}
-
-function generateWidgets() {
-  return {
-    AltDateTimeWidget,
-    AltDateWidget,
-    CheckboxWidget,
-    CheckboxesWidget,
-    RadioWidget,
-    RangeWidget,
-    SelectWidget,
-    TextareaWidget,
-    UpDownWidget
-  };
-}
-var Widgets = /*#__PURE__*/generateWidgets();
-
-function generateTheme() {
-  return {
-    templates: generateTemplates(),
-    widgets: generateWidgets()
-  };
-}
-var Theme = /*#__PURE__*/generateTheme();
-
-function generateForm() {
-  return core.withTheme(generateTheme());
-}
-var Form = /*#__PURE__*/generateForm();
-
-/**
- *
- * The reason we need this is for ChakraProvider styling in Playground.
- * The User Developer would be responsible for styling with ChakraProvider in their app.
- *
- * Exact duplicate of `@chakra-ui/react`'s `CSSReset` component. Except for the following:
- *
-  ```css
-    input {
-      border-width: revert;
-      border-color: revert;
-      border-style: revert;
-    }
-    .array-item > hr {
-      margin-top: 16px;
-      margin-bottom: 16px;
-    }
-  ```
-
-  It is located at the bottom of the styles string.
- */
-const CSSReset = () => jsxRuntime.jsx(react$2.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;
-      }
-    `
-});
-
-/**
- * __createChakraFrameProvider is used to ensure that <Global> emotion components
- * can be rendered within an iframe without changing the styles of the parent page.
- * Required for using Chakra UI in the playground.
- *
- * We have to define ChakraFrameProvider in this library, as opposed to the playground,
- * in order to avoid conflicting versions of emotion, which breaks the styling.
- *
- * NOTE: This is an internal component only used by @rjsf/playground (no
- * backwards compatibility guarantees!)
- *
- * From: https://codesandbox.io/s/p98y9o7jz0?file=/src/frame-provider.js:0-650
- * Also see: https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706
- */
-const memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](container => {
-  const newCache = createCache__default["default"]({
-    container,
-    key: 'rjsf'
-  });
-  return newCache;
-});
-const __createChakraFrameProvider = props => ({
-  document
-}) => {
-  return jsxRuntime.jsx("div", {
-    style: {
-      margin: 2
-    },
-    children: jsxRuntime.jsx(react$2.CacheProvider, {
-      value: memoizedCreateCacheWithContainer(document.head),
-      children: jsxRuntime.jsxs(react.ChakraProvider, {
-        resetCSS: false,
-        children: [jsxRuntime.jsx(CSSReset, {}), props.children]
-      })
-    })
-  });
-};
-
-exports.Form = Form;
-exports.Templates = Templates;
-exports.Theme = Theme;
-exports.Widgets = Widgets;
-exports.__createChakraFrameProvider = __createChakraFrameProvider;
-exports["default"] = Form;
-exports.generateForm = generateForm;
-exports.generateTemplates = generateTemplates;
-exports.generateTheme = generateTheme;
-exports.generateWidgets = generateWidgets;
-//# sourceMappingURL=chakra-ui.cjs.development.js.map