@rjsf/fluentui-rc 5.14.2 → 5.14.3

package/dist/index.js

@@ -38,7 +38,15 @@ var import_core = require("@rjsf/core");
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
 var import_react_migration_v0_v9 = require("@fluentui/react-migration-v0-v9");
+var import_react_components = require("@fluentui/react-components");
 var import_jsx_runtime = require("react/jsx-runtime");
+var useStyles = (0, import_react_components.makeStyles)({
+  arrayFieldItem: {
+    "> .form-group": {
+      width: "100%"
+    }
+  }
+});
 function ArrayFieldItemTemplate(props) {
   const {
     children,
@@ -56,9 +64,10 @@ function ArrayFieldItemTemplate(props) {
     uiSchema,
     registry
   } = props;
+  const classes = useStyles();
   const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_migration_v0_v9.Flex, { vAlign: "end", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_migration_v0_v9.Flex, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_migration_v0_v9.Flex, { fill: true, className: classes.arrayFieldItem, children }),
     hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_migration_v0_v9.Flex, { style: { marginLeft: "8px" }, children: [
       (hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         MoveUpButton2,
@@ -102,7 +111,7 @@ function ArrayFieldItemTemplate(props) {
 
 // src/AddButton/AddButton.tsx
 var import_utils = require("@rjsf/utils");
-var import_react_components = require("@fluentui/react-components");
+var import_react_components2 = require("@fluentui/react-components");
 var import_react_icons = require("@fluentui/react-icons");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function AddButton({
@@ -111,22 +120,22 @@ function AddButton({
   ...props
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_components.Button, { ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icons.AddRegular, {}), title: translateString(import_utils.TranslatableString.AddItemButton) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_components2.Button, { ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icons.AddRegular, {}), title: translateString(import_utils.TranslatableString.AddItemButton) });
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
-var import_react_components2 = require("@fluentui/react-components");
+var import_react_components3 = require("@fluentui/react-components");
 var import_react_migration_v0_v92 = require("@fluentui/react-migration-v0-v9");
 var import_utils2 = require("@rjsf/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var useStyles = (0, import_react_components2.makeStyles)({
+var useStyles2 = (0, import_react_components3.makeStyles)({
   arrayItemList: {
-    ...import_react_components2.shorthands.gap("12px")
+    ...import_react_components3.shorthands.gap("12px")
   }
 });
 function ArrayFieldTemplate(props) {
   const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
-  const classes = useStyles();
+  const classes = useStyles2();
   const uiOptions = (0, import_utils2.getUiOptions)(uiSchema);
   const ArrayFieldDescriptionTemplate = (0, import_utils2.getTemplate)(
     "ArrayFieldDescriptionTemplate",
@@ -185,10 +194,10 @@ function ArrayFieldTemplate(props) {
 }
 
 // src/BaseInputTemplate/BaseInputTemplate.tsx
-var import_react_components3 = require("@fluentui/react-components");
+var import_react_components4 = require("@fluentui/react-components");
 var import_utils3 = require("@rjsf/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var useStyles2 = (0, import_react_components3.makeStyles)({
+var useStyles3 = (0, import_react_components4.makeStyles)({
   input: {
     width: "100%"
   },
@@ -217,18 +226,18 @@ function BaseInputTemplate(props) {
     options,
     schema
   } = props;
-  const classes = useStyles2();
+  const classes = useStyles3();
   const inputProps = (0, import_utils3.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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     (0, import_utils3.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_components3.Label, { htmlFor: id, required, disabled, className: classes.label, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_components4.Label, { htmlFor: id, required, disabled, className: classes.label, children: label }),
       hideLabel
     ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_react_components3.Input,
+      import_react_components4.Input,
       {
         id,
         name: id,
@@ -256,33 +265,33 @@ function BaseInputTemplate(props) {
 }
 
 // src/DescriptionField/DescriptionField.tsx
-var import_react_components4 = require("@fluentui/react-components");
+var import_react_components5 = require("@fluentui/react-components");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var useStyles3 = (0, import_react_components4.makeStyles)({
+var useStyles4 = (0, import_react_components5.makeStyles)({
   label: {
-    marginTop: import_react_components4.tokens.spacingVerticalS,
-    marginBottom: import_react_components4.tokens.spacingVerticalM
+    marginTop: import_react_components5.tokens.spacingVerticalS,
+    marginBottom: import_react_components5.tokens.spacingVerticalM
   }
 });
 function DescriptionField(props) {
   const { id, description } = props;
-  const classes = useStyles3();
+  const classes = useStyles4();
   if (description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_components4.Text, { block: true, id, className: classes.label, children: description });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_components5.Text, { block: true, id, className: classes.label, children: description });
   }
   return null;
 }
 
 // src/ErrorList/ErrorList.tsx
-var import_react_components5 = require("@fluentui/react-components");
+var import_react_components6 = require("@fluentui/react-components");
 var import_utils4 = require("@rjsf/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var useStyles4 = (0, import_react_components5.makeStyles)({
+var useStyles5 = (0, import_react_components6.makeStyles)({
   errorCard: {
-    backgroundColor: import_react_components5.tokens.colorStatusDangerBackground1,
-    marginBottom: import_react_components5.tokens.spacingVerticalL,
+    backgroundColor: import_react_components6.tokens.colorStatusDangerBackground1,
+    marginBottom: import_react_components6.tokens.spacingVerticalL,
     "&::after": {
-      ...import_react_components5.shorthands.borderColor(import_react_components5.tokens.colorStatusDangerBorder1)
+      ...import_react_components6.shorthands.borderColor(import_react_components6.tokens.colorStatusDangerBorder1)
     }
   },
   errorTitle: {
@@ -295,9 +304,9 @@ function ErrorList({
   registry
 }) {
   const { translateString } = registry;
-  const classes = useStyles4();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_components5.Card, { appearance: "outline", className: classes.errorCard, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_components5.Text, { as: "h6", size: 400, className: classes.errorTitle, children: translateString(import_utils4.TranslatableString.ErrorsLabel) }),
+  const classes = useStyles5();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_components6.Card, { appearance: "outline", className: classes.errorCard, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_components6.Text, { as: "h6", size: 400, className: classes.errorTitle, children: translateString(import_utils4.TranslatableString.ErrorsLabel) }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { children: errors.map((error, i) => {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: error.stack }, i);
     }) })
@@ -305,13 +314,13 @@ function ErrorList({
 }
 
 // src/IconButton/IconButton.tsx
-var import_react_components6 = require("@fluentui/react-components");
+var import_react_components7 = require("@fluentui/react-components");
 var import_react_icons2 = require("@fluentui/react-icons");
 var import_utils5 = require("@rjsf/utils");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function FluentIconButton(props) {
   const { color, uiSchema, registry, ...otherProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.Button, { ...otherProps, color: "secondary" });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components7.Button, { ...otherProps, color: "secondary" });
 }
 function CopyButton(props) {
   const {
@@ -367,21 +376,21 @@ function RemoveButton(props) {
 }
 
 // src/FieldErrorTemplate/FieldErrorTemplate.tsx
-var import_react_components7 = require("@fluentui/react-components");
+var import_react_components8 = require("@fluentui/react-components");
 var import_utils6 = require("@rjsf/utils");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var useStyles5 = (0, import_react_components7.makeStyles)({
+var useStyles6 = (0, import_react_components8.makeStyles)({
   list: { marginTop: 0, marginBottom: 0, paddingLeft: 0, listStyleType: "none" },
   listItem: {
-    paddingLeft: import_react_components7.tokens.spacingHorizontalL,
-    paddingTop: import_react_components7.tokens.spacingVerticalXS,
-    paddingBottom: import_react_components7.tokens.spacingVerticalXS
+    paddingLeft: import_react_components8.tokens.spacingHorizontalL,
+    paddingTop: import_react_components8.tokens.spacingVerticalXS,
+    paddingBottom: import_react_components8.tokens.spacingVerticalXS
   },
-  errorLabel: { color: import_react_components7.tokens.colorPaletteRedForeground1 }
+  errorLabel: { color: import_react_components8.tokens.colorPaletteRedForeground1 }
 });
 function FieldErrorTemplate(props) {
   const { errors = [], idSchema } = props;
-  const classes = useStyles5();
+  const classes = useStyles6();
   if (errors.length === 0) {
     return null;
   }
@@ -392,7 +401,7 @@ function FieldErrorTemplate(props) {
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
-var import_react_components8 = require("@fluentui/react-components");
+var import_react_components9 = require("@fluentui/react-components");
 var import_utils7 = require("@rjsf/utils");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function FieldHelpTemplate(props) {
@@ -401,11 +410,11 @@ function FieldHelpTemplate(props) {
     return null;
   }
   const id = (0, import_utils7.helpId)(idSchema);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.Caption1, { id, children: help });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components9.Caption1, { id, children: help });
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
-var import_react_components9 = require("@fluentui/react-components");
+var import_react_components10 = require("@fluentui/react-components");
 var import_utils8 = require("@rjsf/utils");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function FieldTemplate(props) {
@@ -455,9 +464,9 @@ function FieldTemplate(props) {
       schema,
       uiSchema,
       registry,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_components9.Field, { validationState: rawErrors.length ? "error" : void 0, required, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_components10.Field, { validationState: rawErrors.length ? "error" : void 0, required, children: [
         children,
-        displayLabel && rawDescription ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_components9.Text, { as: "p", block: true, style: { marginTop: 0, marginBottom: 0 }, children: description }) : null,
+        displayLabel && rawDescription ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_components10.Text, { as: "p", block: true, style: { marginTop: 0, marginBottom: 0 }, children: description }) : null,
         errors,
         help
       ] })
@@ -540,26 +549,26 @@ function ObjectFieldTemplate(props) {
 
 // src/SubmitButton/SubmitButton.tsx
 var import_utils10 = require("@rjsf/utils");
-var import_react_components10 = require("@fluentui/react-components");
+var import_react_components11 = require("@fluentui/react-components");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var useStyles6 = (0, import_react_components10.makeStyles)({
+var useStyles7 = (0, import_react_components11.makeStyles)({
   buttonRow: {
-    marginTop: import_react_components10.tokens.spacingVerticalL
+    marginTop: import_react_components11.tokens.spacingVerticalL
   }
 });
 function SubmitButton({ uiSchema }) {
-  const classes = useStyles6();
+  const classes = useStyles7();
   const { submitText, norender, props: submitButtonProps } = (0, import_utils10.getSubmitButtonOptions)(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: classes.buttonRow, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components10.Button, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: classes.buttonRow, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components11.Button, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
-var import_react_components11 = require("@fluentui/react-components");
+var import_react_components12 = require("@fluentui/react-components");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var useStyles7 = (0, import_react_components11.makeStyles)({
+var useStyles8 = (0, import_react_components12.makeStyles)({
   root: {
     marginTop: "8px",
     marginBottom: "8px"
@@ -569,19 +578,19 @@ function TitleField({
   id,
   title
 }) {
-  const classes = useStyles7();
+  const classes = useStyles8();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { id, className: classes.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components11.Text, { as: "h5", size: 600, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components11.Divider, {})
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components12.Text, { as: "h5", size: 600, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components12.Divider, {})
   ] });
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
 var import_utils11 = require("@rjsf/utils");
-var import_react_components12 = require("@fluentui/react-components");
+var import_react_components13 = require("@fluentui/react-components");
 var import_react_migration_v0_v94 = require("@fluentui/react-migration-v0-v9");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var useStyles8 = (0, import_react_components12.makeStyles)({
+var useStyles9 = (0, import_react_components13.makeStyles)({
   input: {
     width: "100%"
   },
@@ -606,7 +615,7 @@ function WrapIfAdditionalTemplate(props) {
     registry
   } = props;
   const { templates, translateString } = registry;
-  const classes = useStyles8();
+  const classes = useStyles9();
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(import_utils11.TranslatableString.KeyLabel, [label]);
   const additional = import_utils11.ADDITIONAL_PROPERTY_FLAG in schema;
@@ -621,8 +630,8 @@ function WrapIfAdditionalTemplate(props) {
   }
   const handleBlur = ({ target }) => onKeyChange(target.value);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_migration_v0_v94.Flex, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components12.Field, { label: keyLabel, required, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_react_components12.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components13.Field, { label: keyLabel, required, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react_components13.Input,
       {
         required,
         defaultValue: label,
@@ -679,7 +688,7 @@ var Templates_default = generateTemplates();
 
 // src/CheckboxWidget/CheckboxWidget.tsx
 var import_utils12 = require("@rjsf/utils");
-var import_react_components13 = require("@fluentui/react-components");
+var import_react_components14 = require("@fluentui/react-components");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
@@ -720,7 +729,7 @@ function CheckboxWidget(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_components13.Checkbox,
+      import_react_components14.Checkbox,
       {
         id,
         name: id,
@@ -740,7 +749,7 @@ function CheckboxWidget(props) {
 
 // src/CheckboxesWidget/CheckboxesWidget.tsx
 var import_utils13 = require("@rjsf/utils");
-var import_react_components14 = require("@fluentui/react-components");
+var import_react_components15 = require("@fluentui/react-components");
 var import_react_migration_v0_v95 = require("@fluentui/react-migration-v0-v9");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function CheckboxesWidget({
@@ -770,14 +779,14 @@ function CheckboxesWidget({
   const _onFocus = ({ target: { value: value2 } }) => onFocus(id, (0, import_utils13.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
     (0, import_utils13.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_components14.Label, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_components15.Label, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_migration_v0_v95.Flex, { column: !inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = (0, import_utils13.enumOptionsIsSelected)(option.value, checkboxesValues);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
       return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_react_components14.Checkbox,
+        import_react_components15.Checkbox,
         {
           id: (0, import_utils13.optionId)(id, index),
           name: id,
@@ -798,7 +807,7 @@ function CheckboxesWidget({
 
 // src/RadioWidget/RadioWidget.tsx
 var import_utils14 = require("@rjsf/utils");
-var import_react_components15 = require("@fluentui/react-components");
+var import_react_components16 = require("@fluentui/react-components");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function RadioWidget({
   id,
@@ -820,11 +829,11 @@ function RadioWidget({
   const selectedIndex = (0, import_utils14.enumOptionsIndexForValue)(value, enumOptions) ?? void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     (0, import_utils14.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_components15.Label, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_components16.Label, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react_components15.RadioGroup,
+      import_react_components16.RadioGroup,
       {
         id,
         name: id,
@@ -836,7 +845,7 @@ function RadioWidget({
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
           return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            import_react_components15.Radio,
+            import_react_components16.Radio,
             {
               id: (0, import_utils14.optionId)(id, index),
               label: option.label,
@@ -853,7 +862,7 @@ function RadioWidget({
 
 // src/RangeWidget/RangeWidget.tsx
 var import_utils15 = require("@rjsf/utils");
-var import_react_components16 = require("@fluentui/react-components");
+var import_react_components17 = require("@fluentui/react-components");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
@@ -865,11 +874,11 @@ function RangeWidget(props) {
   const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     (0, import_utils15.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_components16.Label, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_components17.Label, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_react_components16.Slider,
+      import_react_components17.Slider,
       {
         disabled: disabled || readonly,
         onChange: _onChange,
@@ -884,7 +893,7 @@ function RangeWidget(props) {
 
 // src/SelectWidget/SelectWidget.tsx
 var import_utils16 = require("@rjsf/utils");
-var import_react_components17 = require("@fluentui/react-components");
+var import_react_components18 = require("@fluentui/react-components");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function getValue(data, multiple) {
   if (multiple) {
@@ -924,13 +933,13 @@ function SelectWidget({
     return onChange((0, import_utils16.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_react_components17.Field,
+    import_react_components18.Field,
     {
       label: (0, import_utils16.labelValue)(label, hideLabel),
       validationState: rawErrors.length ? "error" : void 0,
       required,
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react_components17.Dropdown,
+        import_react_components18.Dropdown,
         {
           id,
           name: id,
@@ -946,7 +955,7 @@ function SelectWidget({
           "aria-describedby": (0, import_utils16.ariaDescribedByIds)(id),
           children: Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
             const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_components17.Option, { value: String(i), disabled: disabled2, children: label2 }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_components18.Option, { value: String(i), disabled: disabled2, children: label2 }, i);
           })
         }
       )
@@ -956,10 +965,10 @@ function SelectWidget({
 var SelectWidget_default = SelectWidget;
 
 // src/TextareaWidget/TextareaWidget.tsx
-var import_react_components18 = require("@fluentui/react-components");
+var import_react_components19 = require("@fluentui/react-components");
 var import_utils17 = require("@rjsf/utils");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var useStyles9 = (0, import_react_components18.makeStyles)({
+var useStyles10 = (0, import_react_components19.makeStyles)({
   label: {
     paddingTop: "2px",
     paddingBottom: "2px",
@@ -984,7 +993,7 @@ function TextareaWidget(props) {
     options,
     schema
   } = props;
-  const classes = useStyles9();
+  const classes = useStyles10();
   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);
@@ -994,11 +1003,11 @@ function TextareaWidget(props) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     (0, import_utils17.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_components18.Label, { htmlFor: id, required, disabled, className: classes.label, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_components19.Label, { htmlFor: id, required, disabled, className: classes.label, children: label }),
       hideLabel
     ),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react_components18.Textarea,
+      import_react_components19.Textarea,
       {
         id,
         name: id,
@@ -1046,13 +1055,13 @@ function generateForm() {
 var FluentForm_default = generateForm();
 
 // src/FluentUIRCFrameProvider.tsx
-var import_react_components19 = require("@fluentui/react-components");
+var import_react_components20 = require("@fluentui/react-components");
 var import_react = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var FluentWrapper = (props) => {
   const { children, targetDocument } = props;
-  const renderer = (0, import_react.useMemo)(() => (0, import_react_components19.createDOMRenderer)(targetDocument), [targetDocument]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_components19.RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_components19.FluentProvider, { targetDocument, theme: import_react_components19.teamsLightTheme, children }) });
+  const renderer = (0, import_react.useMemo)(() => (0, import_react_components20.createDOMRenderer)(targetDocument), [targetDocument]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_components20.RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_components20.FluentProvider, { targetDocument, theme: import_react_components20.teamsLightTheme, children }) });
 };
 var __createFluentUIRCFrameProvider = (props) => ({ document }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FluentWrapper, { targetDocument: document, children: props.children });