@rjsf/fluentui-rc 5.14.1

package/dist/core.umd.js

@@ -0,0 +1,940 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('@fluentui/react-migration-v0-v9'), require('react/jsx-runtime'), require('@rjsf/utils'), require('@fluentui/react-components'), require('@fluentui/react-icons'), require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', '@fluentui/react-migration-v0-v9', 'react/jsx-runtime', '@rjsf/utils', '@fluentui/react-components', '@fluentui/react-icons', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.core, global.reactMigrationV0V9, global.jsxRuntime, global.utils, global.reactComponents, global.reactIcons, global.react));
+})(this, (function (exports, core, reactMigrationV0V9, jsxRuntime, utils, reactComponents, reactIcons, react) { 'use strict';
+
+  // src/FluentForm/FluentForm.ts
+  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;
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { vAlign: "end", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { children }),
+      hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { style: { marginLeft: "8px" }, children: [
+        (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
+          MoveUpButton2,
+          {
+            disabled: disabled || readonly || !hasMoveUp,
+            onClick: onReorderClick(index, index - 1),
+            uiSchema,
+            registry
+          }
+        ),
+        (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
+          MoveDownButton2,
+          {
+            disabled: disabled || readonly || !hasMoveDown,
+            onClick: onReorderClick(index, index + 1),
+            uiSchema,
+            registry
+          }
+        ),
+        hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
+          CopyButton2,
+          {
+            disabled: disabled || readonly,
+            onClick: onCopyIndexClick(index),
+            uiSchema,
+            registry
+          }
+        ),
+        hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
+          RemoveButton2,
+          {
+            disabled: disabled || readonly,
+            onClick: onDropIndexClick(index),
+            uiSchema,
+            registry
+          }
+        )
+      ] })
+    ] });
+  }
+  function AddButton({
+    uiSchema,
+    registry,
+    ...props
+  }) {
+    const { translateString } = registry;
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}), title: translateString(utils.TranslatableString.AddItemButton) });
+  }
+  var useStyles = reactComponents.makeStyles({
+    arrayItemList: {
+      ...reactComponents.shorthands.gap("12px")
+    }
+  });
+  function ArrayFieldTemplate(props) {
+    const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
+    const classes = useStyles();
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const ArrayFieldDescriptionTemplate = utils.getTemplate(
+      "ArrayFieldDescriptionTemplate",
+      registry,
+      uiOptions
+    );
+    const ArrayFieldItemTemplate2 = utils.getTemplate(
+      "ArrayFieldItemTemplate",
+      registry,
+      uiOptions
+    );
+    const ArrayFieldTitleTemplate = utils.getTemplate(
+      "ArrayFieldTitleTemplate",
+      registry,
+      uiOptions
+    );
+    const {
+      ButtonTemplates: { AddButton: AddButton2 }
+    } = registry.templates;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ArrayFieldTitleTemplate,
+        {
+          idSchema,
+          title: uiOptions.title || title,
+          schema,
+          uiSchema,
+          required,
+          registry
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ArrayFieldDescriptionTemplate,
+        {
+          idSchema,
+          description: uiOptions.description || schema.description,
+          schema,
+          uiSchema,
+          registry
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { column: true, className: classes.arrayItemList, children: [
+        items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key)),
+        canAdd && /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { hAlign: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          AddButton2,
+          {
+            className: "array-item-add",
+            onClick: onAddClick,
+            disabled: disabled || readonly,
+            uiSchema,
+            registry
+          }
+        ) })
+      ] }, `array-item-list-${idSchema.$id}`)
+    ] });
+  }
+  var useStyles2 = reactComponents.makeStyles({
+    input: {
+      width: "100%"
+    },
+    label: {
+      paddingTop: "2px",
+      paddingBottom: "2px",
+      marginBottom: "2px"
+    }
+  });
+  function BaseInputTemplate(props) {
+    const {
+      id,
+      placeholder,
+      required,
+      readonly,
+      disabled,
+      type,
+      value,
+      label,
+      hideLabel,
+      onChange,
+      onChangeOverride,
+      onBlur,
+      onFocus,
+      autofocus,
+      options,
+      schema
+    } = props;
+    const classes = useStyles2();
+    const inputProps = utils.getInputProps(schema, type, options);
+    const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
+    const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
+    const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      utils.labelValue(
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Label, { htmlFor: id, required, disabled, className: classes.label, children: label }),
+        hideLabel
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Input,
+        {
+          id,
+          name: id,
+          placeholder,
+          autoFocus: autofocus,
+          required,
+          disabled: disabled || readonly,
+          ...inputProps,
+          input: {
+            className: classes.input,
+            // Due to Fluent UI this does not work correctly
+            list: schema.examples ? utils.examplesId(id) : void 0
+          },
+          value: value || value === 0 ? value : "",
+          onChange: onChangeOverride || _onChange,
+          onFocus: _onFocus,
+          onBlur: _onBlur,
+          "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
+        }
+      ),
+      Array.isArray(schema.examples) && /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: utils.examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("option", { value: example }, example);
+      }) })
+    ] });
+  }
+  var useStyles3 = reactComponents.makeStyles({
+    label: {
+      marginTop: reactComponents.tokens.spacingVerticalS,
+      marginBottom: reactComponents.tokens.spacingVerticalM
+    }
+  });
+  function DescriptionField(props) {
+    const { id, description } = props;
+    const classes = useStyles3();
+    if (description) {
+      return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, id, className: classes.label, children: description });
+    }
+    return null;
+  }
+  var useStyles4 = reactComponents.makeStyles({
+    errorCard: {
+      backgroundColor: reactComponents.tokens.colorStatusDangerBackground1,
+      marginBottom: reactComponents.tokens.spacingVerticalL,
+      "&::after": {
+        ...reactComponents.shorthands.borderColor(reactComponents.tokens.colorStatusDangerBorder1)
+      }
+    },
+    errorTitle: {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  });
+  function ErrorList({
+    errors,
+    registry
+  }) {
+    const { translateString } = registry;
+    const classes = useStyles4();
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { appearance: "outline", className: classes.errorCard, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "h6", size: 400, className: classes.errorTitle, children: translateString(utils.TranslatableString.ErrorsLabel) }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { children: errors.map((error, i) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { children: error.stack }, i);
+      }) })
+    ] });
+  }
+  function FluentIconButton(props) {
+    const { color, uiSchema, registry, ...otherProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { ...otherProps, color: "secondary" });
+  }
+  function CopyButton(props) {
+    const {
+      registry: { translateString }
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FluentIconButton,
+      {
+        title: translateString(utils.TranslatableString.CopyButton),
+        ...props,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CopyRegular, {})
+      }
+    );
+  }
+  function MoveDownButton(props) {
+    const {
+      registry: { translateString }
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FluentIconButton,
+      {
+        title: translateString(utils.TranslatableString.MoveDownButton),
+        ...props,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowSortDownRegular, {})
+      }
+    );
+  }
+  function MoveUpButton(props) {
+    const {
+      registry: { translateString }
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FluentIconButton,
+      {
+        title: translateString(utils.TranslatableString.MoveUpButton),
+        ...props,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowSortUpRegular, {})
+      }
+    );
+  }
+  function RemoveButton(props) {
+    const {
+      registry: { translateString }
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FluentIconButton,
+      {
+        title: translateString(utils.TranslatableString.RemoveButton),
+        ...props,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SubtractRegular, {})
+      }
+    );
+  }
+  var useStyles5 = reactComponents.makeStyles({
+    list: { marginTop: 0, marginBottom: 0, paddingLeft: 0, listStyleType: "none" },
+    listItem: {
+      paddingLeft: reactComponents.tokens.spacingHorizontalL,
+      paddingTop: reactComponents.tokens.spacingVerticalXS,
+      paddingBottom: reactComponents.tokens.spacingVerticalXS
+    },
+    errorLabel: { color: reactComponents.tokens.colorPaletteRedForeground1 }
+  });
+  function FieldErrorTemplate(props) {
+    const { errors = [], idSchema } = props;
+    const classes = useStyles5();
+    if (errors.length === 0) {
+      return null;
+    }
+    const id = utils.errorId(idSchema);
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classes.list, children: errors.map((error, i) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { className: classes.listItem, children: /* @__PURE__ */ jsxRuntime.jsx("small", { className: classes.errorLabel, id, children: error }) }, i);
+    }) });
+  }
+  function FieldHelpTemplate(props) {
+    const { idSchema, help } = props;
+    if (!help) {
+      return null;
+    }
+    const id = utils.helpId(idSchema);
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { id, children: help });
+  }
+  function FieldTemplate(props) {
+    const {
+      id,
+      children,
+      classNames,
+      style,
+      disabled,
+      displayLabel,
+      hidden,
+      label,
+      onDropPropertyClick,
+      onKeyChange,
+      readonly,
+      required,
+      rawErrors = [],
+      errors,
+      help,
+      description,
+      rawDescription,
+      schema,
+      uiSchema,
+      registry
+    } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const WrapIfAdditionalTemplate2 = utils.getTemplate(
+      "WrapIfAdditionalTemplate",
+      registry,
+      uiOptions
+    );
+    if (hidden) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "none" }, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      WrapIfAdditionalTemplate2,
+      {
+        classNames,
+        style,
+        disabled,
+        id,
+        label,
+        onDropPropertyClick,
+        onKeyChange,
+        readonly,
+        required,
+        schema,
+        uiSchema,
+        registry,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Field, { validationState: rawErrors.length ? "error" : void 0, required, children: [
+          children,
+          displayLabel && rawDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "p", block: true, style: { marginTop: 0, marginBottom: 0 }, 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
+    );
+    const {
+      ButtonTemplates: { AddButton: AddButton2 }
+    } = registry.templates;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(
+        TitleFieldTemplate,
+        {
+          id: utils.titleId(idSchema),
+          title,
+          required,
+          schema,
+          uiSchema,
+          registry
+        }
+      ),
+      description && /* @__PURE__ */ jsxRuntime.jsx(
+        DescriptionFieldTemplate,
+        {
+          id: utils.descriptionId(idSchema),
+          description,
+          schema,
+          uiSchema,
+          registry
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { fill: true, column: true, gap: "gap.medium", children: [
+        properties.map(
+          (element, index) => (
+            // Remove the <Grid> if the inner element is hidden as the <Grid>
+            // itself would otherwise still take up space.
+            element.hidden ? element.content : /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { column: true, fill: true, style: { marginBottom: "10px" }, children: element.content }, index)
+          )
+        ),
+        utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { hAlign: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          AddButton2,
+          {
+            className: "object-property-expand",
+            onClick: onAddClick(schema),
+            disabled: disabled || readonly,
+            uiSchema,
+            registry
+          }
+        ) })
+      ] })
+    ] });
+  }
+  var useStyles6 = reactComponents.makeStyles({
+    buttonRow: {
+      marginTop: reactComponents.tokens.spacingVerticalL
+    }
+  });
+  function SubmitButton({ uiSchema }) {
+    const classes = useStyles6();
+    const { submitText, norender, props: submitButtonProps } = utils.getSubmitButtonOptions(uiSchema);
+    if (norender) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.buttonRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
+  }
+  var useStyles7 = reactComponents.makeStyles({
+    root: {
+      marginTop: "8px",
+      marginBottom: "8px"
+    }
+  });
+  function TitleField({
+    id,
+    title
+  }) {
+    const classes = useStyles7();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: classes.root, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { as: "h5", size: 600, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
+    ] });
+  }
+  var useStyles8 = reactComponents.makeStyles({
+    input: {
+      width: "100%"
+    },
+    label: {
+      marginBottom: "4px"
+    }
+  });
+  function WrapIfAdditionalTemplate(props) {
+    const {
+      children,
+      classNames,
+      style,
+      disabled,
+      id,
+      label,
+      onDropPropertyClick,
+      onKeyChange,
+      readonly,
+      required,
+      schema,
+      uiSchema,
+      registry
+    } = props;
+    const { templates, translateString } = registry;
+    const classes = useStyles8();
+    const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
+    const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
+    const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
+    const btnStyle = {
+      flex: 1,
+      paddingLeft: 6,
+      paddingRight: 6,
+      fontWeight: "bold"
+    };
+    if (!additional) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
+    }
+    const handleBlur = ({ target }) => onKeyChange(target.value);
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactMigrationV0V9.Flex, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: keyLabel, required, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Input,
+        {
+          required,
+          defaultValue: label,
+          disabled: disabled || readonly,
+          id: `${id}-key`,
+          name: `${id}-key`,
+          onBlur: !readonly ? handleBlur : void 0,
+          type: "text",
+          input: {
+            className: classes.input
+          }
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        RemoveButton2,
+        {
+          iconType: "default",
+          style: btnStyle,
+          disabled: disabled || readonly,
+          onClick: onDropPropertyClick(label),
+          uiSchema,
+          registry
+        }
+      ) })
+    ] }, `${id}-key`);
+  }
+
+  // src/Templates/Templates.ts
+  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_default = generateTemplates();
+  function CheckboxWidget(props) {
+    const {
+      schema,
+      id,
+      value,
+      disabled,
+      readonly,
+      label = "",
+      hideLabel,
+      autofocus,
+      onChange,
+      onBlur,
+      onFocus,
+      registry,
+      options,
+      uiSchema
+    } = props;
+    const DescriptionFieldTemplate = utils.getTemplate(
+      "DescriptionFieldTemplate",
+      registry,
+      options
+    );
+    const required = utils.schemaRequiresTrueValue(schema);
+    const _onChange = ({ target: { checked } }) => onChange(checked);
+    const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
+    const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
+    const description = options.description ?? schema.description;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      !hideLabel && !!description && /* @__PURE__ */ jsxRuntime.jsx(
+        DescriptionFieldTemplate,
+        {
+          id: utils.descriptionId(id),
+          description,
+          schema,
+          uiSchema,
+          registry
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Checkbox,
+        {
+          id,
+          name: id,
+          label,
+          checked: typeof value === "undefined" ? false : Boolean(value),
+          required,
+          disabled: disabled || readonly,
+          autoFocus: autofocus,
+          onChange: _onChange,
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+          "aria-describedby": utils.ariaDescribedByIds(id)
+        }
+      )
+    ] });
+  }
+  function CheckboxesWidget({
+    label,
+    hideLabel,
+    id,
+    disabled,
+    options,
+    value,
+    autofocus,
+    readonly,
+    required,
+    onChange,
+    onBlur,
+    onFocus
+  }) {
+    const { enumOptions, enumDisabled, inline, emptyValue } = options;
+    const checkboxesValues = Array.isArray(value) ? value : [value];
+    const _onChange = (index) => ({ target: { checked } }) => {
+      if (checked) {
+        onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+      } else {
+        onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
+      }
+    };
+    const _onBlur = ({ target: { value: value2 } }) => onBlur(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
+    const _onFocus = ({ target: { value: value2 } }) => onFocus(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      utils.labelValue(
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Label, { required, htmlFor: id, children: label || void 0 }),
+        hideLabel
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(reactMigrationV0V9.Flex, { column: !inline, 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 /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Checkbox,
+          {
+            id: utils.optionId(id, index),
+            name: id,
+            label: option.label,
+            checked,
+            disabled: disabled || itemDisabled || readonly,
+            autoFocus: autofocus && index === 0,
+            onChange: _onChange(index),
+            onBlur: _onBlur,
+            onFocus: _onFocus,
+            "aria-describedby": utils.ariaDescribedByIds(id)
+          },
+          index
+        );
+      }) })
+    ] });
+  }
+  function RadioWidget({
+    id,
+    options,
+    value,
+    required,
+    disabled,
+    readonly,
+    label,
+    hideLabel,
+    onChange,
+    onBlur,
+    onFocus
+  }) {
+    const { enumOptions, enumDisabled, emptyValue } = options;
+    const _onChange = (_, data) => onChange(utils.enumOptionsValueForIndex(data.value, enumOptions, emptyValue));
+    const _onBlur = ({ target: { value: value2 } }) => onBlur(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
+    const _onFocus = ({ target: { value: value2 } }) => onFocus(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
+    const selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions) ?? void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      utils.labelValue(
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Label, { required, htmlFor: id, children: label || void 0 }),
+        hideLabel
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.RadioGroup,
+        {
+          id,
+          name: id,
+          value: selectedIndex,
+          onChange: _onChange,
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+          "aria-describedby": utils.ariaDescribedByIds(id),
+          children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Radio,
+              {
+                id: utils.optionId(id, index),
+                label: option.label,
+                value: String(index),
+                disabled: disabled || itemDisabled || readonly
+              },
+              index
+            );
+          })
+        }
+      )
+    ] });
+  }
+  function RangeWidget(props) {
+    const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
+    const sliderProps = { value, label, id, name: id, ...utils.rangeSpec(schema) };
+    const _onChange = (_, data) => {
+      onChange(data.value ?? options.emptyValue);
+    };
+    const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
+    const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      utils.labelValue(
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Label, { required, htmlFor: id, children: label || void 0 }),
+        hideLabel
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Slider,
+        {
+          disabled: disabled || readonly,
+          onChange: _onChange,
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+          ...sliderProps,
+          "aria-describedby": utils.ariaDescribedByIds(id)
+        }
+      )
+    ] });
+  }
+  function getValue(data, multiple) {
+    if (multiple) {
+      return data.selectedOptions;
+    }
+    return data.selectedOptions[0];
+  }
+  function SelectWidget({
+    id,
+    options,
+    label,
+    hideLabel,
+    value,
+    required,
+    disabled,
+    readonly,
+    multiple = false,
+    autofocus = false,
+    rawErrors = [],
+    onChange,
+    onBlur,
+    onFocus
+  }) {
+    const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
+    const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
+    let selectedIndexesAsArray = [];
+    if (typeof selectedIndexes === "string") {
+      selectedIndexesAsArray = [selectedIndexes];
+    } else if (Array.isArray(selectedIndexes)) {
+      selectedIndexesAsArray = selectedIndexes.map((index) => String(index));
+    }
+    const dropdownValue = selectedIndexesAsArray.map((index) => enumOptions ? enumOptions[Number(index)].label : void 0).join(", ");
+    const _onBlur = () => onBlur(id, selectedIndexes);
+    const _onFocus = () => onFocus(id, selectedIndexes);
+    const _onChange = (_, data) => {
+      const newValue = getValue(data, multiple);
+      return onChange(utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Field,
+      {
+        label: utils.labelValue(label, hideLabel),
+        validationState: rawErrors.length ? "error" : void 0,
+        required,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Dropdown,
+          {
+            id,
+            name: id,
+            multiselect: multiple,
+            className: "form-control",
+            value: dropdownValue,
+            disabled: disabled || readonly,
+            autoFocus: autofocus,
+            onBlur: _onBlur,
+            onFocus: _onFocus,
+            onOptionSelect: _onChange,
+            selectedOptions: selectedIndexesAsArray,
+            "aria-describedby": utils.ariaDescribedByIds(id),
+            children: Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
+              const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
+              return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: String(i), disabled: disabled2, children: label2 }, i);
+            })
+          }
+        )
+      }
+    );
+  }
+  var SelectWidget_default = SelectWidget;
+  var useStyles9 = reactComponents.makeStyles({
+    label: {
+      paddingTop: "2px",
+      paddingBottom: "2px",
+      marginBottom: "2px"
+    }
+  });
+  function TextareaWidget(props) {
+    const {
+      id,
+      placeholder,
+      required,
+      readonly,
+      disabled,
+      value,
+      label,
+      hideLabel,
+      onChange,
+      onChangeOverride,
+      onBlur,
+      onFocus,
+      autofocus,
+      options,
+      schema
+    } = props;
+    const classes = useStyles9();
+    const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
+    const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
+    const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
+    let rows = 5;
+    if (typeof options.rows === "string" || typeof options.rows === "number") {
+      rows = options.rows;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      utils.labelValue(
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Label, { htmlFor: id, required, disabled, className: classes.label, children: label }),
+        hideLabel
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Textarea,
+        {
+          id,
+          name: id,
+          placeholder,
+          autoFocus: autofocus,
+          required,
+          disabled: disabled || readonly,
+          value: value || value === 0 ? value : "",
+          onChange: onChangeOverride || _onChange,
+          onFocus: _onFocus,
+          onBlur: _onBlur,
+          "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples),
+          rows
+        }
+      )
+    ] });
+  }
+
+  // src/Widgets/Widgets.ts
+  function generateWidgets() {
+    return {
+      CheckboxWidget,
+      CheckboxesWidget,
+      RadioWidget,
+      RangeWidget,
+      SelectWidget: SelectWidget_default,
+      TextareaWidget
+    };
+  }
+  var Widgets_default = generateWidgets();
+
+  // src/Theme/Theme.ts
+  function generateTheme() {
+    return {
+      templates: generateTemplates(),
+      widgets: generateWidgets()
+    };
+  }
+  var Theme_default = generateTheme();
+
+  // src/FluentForm/FluentForm.ts
+  function generateForm() {
+    return core.withTheme(generateTheme());
+  }
+  var FluentForm_default = generateForm();
+  var FluentWrapper = (props) => {
+    const { children, targetDocument } = props;
+    const renderer = react.useMemo(() => reactComponents.createDOMRenderer(targetDocument), [targetDocument]);
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.FluentProvider, { targetDocument, theme: reactComponents.teamsLightTheme, children }) });
+  };
+  var __createFluentUIRCFrameProvider = (props) => ({ document }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(FluentWrapper, { targetDocument: document, children: props.children });
+  };
+
+  // src/index.ts
+  var src_default = FluentForm_default;
+
+  exports.Form = FluentForm_default;
+  exports.Templates = Templates_default;
+  exports.Theme = Theme_default;
+  exports.Widgets = Widgets_default;
+  exports.__createFluentUIRCFrameProvider = __createFluentUIRCFrameProvider;
+  exports.default = src_default;
+  exports.generateForm = generateForm;
+  exports.generateTemplates = generateTemplates;
+  exports.generateTheme = generateTheme;
+  exports.generateWidgets = generateWidgets;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));