@rjsf/fluentui-rc 6.0.0-beta.1 → 6.0.0-beta.11

package/README.md

@@ -59,11 +59,15 @@ Fluent UI React Components (v9) theme, fields and widgets for `react-jsonschema-
 
 ### Prerequisites
 
-- `@fluentui/react-components >= 9.35.0`
-- `@rjsf/core >= 2.0.0`
+- `@fluentui/react-components >= 9`
+- `@fluentui/react-icons >= 2`
+- `@fluentui/react-migration-v0-v9 >= 9`
+- `@rjsf/core >= 6`
+- `@rjsf/utils >= 6`
+- `@rjsf/validator-ajv8 >= 6`
 
 ```bash
-yarn add @fluentui/react-components @rjsf/core @rjsf/utils @rjsf/validator-ajv8
+yarn add @fluentui/react-components @fluentui/react-icons @fluentui/react-migration-v0-v9 @rjsf/core @rjsf/utils @rjsf/validator-ajv8
 ```
 
 ### Installation

package/dist/core.umd.js

@@ -172,12 +172,12 @@
     }
   });
   function DescriptionField(props) {
-    const { id, description } = props;
+    const { id, description, registry, uiSchema } = props;
     const classes = useStyles4();
-    if (description) {
-      return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, id, className: classes.label, children: description });
+    if (!description) {
+      return null;
     }
-    return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { block: true, id, className: classes.label, children: /* @__PURE__ */ jsxRuntime.jsx(core.RichDescription, { description, registry, uiSchema }) });
   }
   var useStyles5 = reactComponents.makeStyles({
     errorCard: {
@@ -357,6 +357,19 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style, ...rest, children });
   }
+  var useStyles7 = reactComponents.makeStyles({
+    root: {
+      "> div": { marginBottom: "4px" }
+    }
+  });
+  function MultiSchemaFieldTemplate(props) {
+    const { selector, optionSchemaField } = props;
+    const styles = useStyles7();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.root, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: selector }),
+      optionSchemaField
+    ] });
+  }
   function ObjectFieldTemplate(props) {
     const {
       description,
@@ -426,20 +439,20 @@
       ] })
     ] });
   }
-  var useStyles7 = reactComponents.makeStyles({
+  var useStyles8 = reactComponents.makeStyles({
     buttonRow: {
       marginTop: reactComponents.tokens.spacingVerticalL
     }
   });
   function SubmitButton({ uiSchema }) {
-    const classes = useStyles7();
+    const classes = useStyles8();
     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 useStyles8 = reactComponents.makeStyles({
+  var useStyles9 = reactComponents.makeStyles({
     root: {
       marginTop: "8px",
       marginBottom: "8px"
@@ -449,13 +462,13 @@
     id,
     title
   }) {
-    const classes = useStyles8();
+    const classes = useStyles9();
     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 useStyles9 = reactComponents.makeStyles({
+  var useStyles10 = reactComponents.makeStyles({
     input: {
       width: "100%"
     },
@@ -480,7 +493,7 @@
       registry
     } = props;
     const { templates, translateString } = registry;
-    const classes = useStyles9();
+    const classes = useStyles10();
     const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
     const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
     const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
@@ -547,6 +560,7 @@
       FieldHelpTemplate,
       FieldTemplate,
       GridTemplate,
+      MultiSchemaFieldTemplate,
       ObjectFieldTemplate,
       TitleFieldTemplate: TitleField,
       WrapIfAdditionalTemplate
@@ -581,7 +595,7 @@
     const _onFocus = ({ target }) => onFocus(id, target && target.value);
     const description = options.description ?? schema.description;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !hideLabel && !!description && /* @__PURE__ */ jsxRuntime.jsx(
+      !hideLabel && description && /* @__PURE__ */ jsxRuntime.jsx(
         DescriptionFieldTemplate,
         {
           id: utils.descriptionId(id),
@@ -812,7 +826,7 @@
     );
   }
   var SelectWidget_default = SelectWidget;
-  var useStyles10 = reactComponents.makeStyles({
+  var useStyles11 = reactComponents.makeStyles({
     label: {
       paddingTop: "2px",
       paddingBottom: "2px",
@@ -837,7 +851,7 @@
       options,
       schema
     } = props;
-    const classes = useStyles10();
+    const classes = useStyles11();
     const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
     const _onBlur = ({ target }) => onBlur(id, target && target.value);
     const _onFocus = ({ target }) => onFocus(id, target && target.value);

package/dist/index.esm.js

@@ -198,6 +198,7 @@ function BaseInputTemplate(props) {
 
 // src/DescriptionField/DescriptionField.tsx
 import { Text, makeStyles as makeStyles4, tokens } from "@fluentui/react-components";
+import { RichDescription } from "@rjsf/core";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var useStyles4 = makeStyles4({
   label: {
@@ -206,12 +207,12 @@ var useStyles4 = makeStyles4({
   }
 });
 function DescriptionField(props) {
-  const { id, description } = props;
+  const { id, description, registry, uiSchema } = props;
   const classes = useStyles4();
-  if (description) {
-    return /* @__PURE__ */ jsx5(Text, { block: true, id, className: classes.label, children: description });
+  if (!description) {
+    return null;
   }
-  return null;
+  return /* @__PURE__ */ jsx5(Text, { block: true, id, className: classes.label, children: /* @__PURE__ */ jsx5(RichDescription, { description, registry, uiSchema }) });
 }
 
 // src/ErrorList/ErrorList.tsx
@@ -425,6 +426,23 @@ function GridTemplate(props) {
   return /* @__PURE__ */ jsx11("div", { style, ...rest, children });
 }
 
+// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
+import { makeStyles as makeStyles7 } from "@fluentui/react-components";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var useStyles7 = makeStyles7({
+  root: {
+    "> div": { marginBottom: "4px" }
+  }
+});
+function MultiSchemaFieldTemplate(props) {
+  const { selector, optionSchemaField } = props;
+  const styles = useStyles7();
+  return /* @__PURE__ */ jsxs6("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx12("div", { children: selector }),
+    optionSchemaField
+  ] });
+}
+
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 import { Flex as Flex3 } from "@fluentui/react-migration-v0-v9";
 import {
@@ -435,7 +453,7 @@ import {
   titleId,
   buttonId as buttonId2
 } from "@rjsf/utils";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -461,8 +479,8 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    title && /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    title && /* @__PURE__ */ jsx13(
       TitleFieldTemplate,
       {
         id: titleId(idSchema),
@@ -473,7 +491,7 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    description && /* @__PURE__ */ jsx12(
+    description && /* @__PURE__ */ jsx13(
       DescriptionFieldTemplate,
       {
         id: descriptionId(idSchema),
@@ -483,15 +501,15 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsxs6(Flex3, { fill: true, column: true, gap: "gap.medium", children: [
+    /* @__PURE__ */ jsxs7(Flex3, { 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__ */ jsx12(Flex3, { column: true, fill: true, style: { marginBottom: "10px" }, children: element.content }, index)
+          element.hidden ? element.content : /* @__PURE__ */ jsx13(Flex3, { column: true, fill: true, style: { marginBottom: "10px" }, children: element.content }, index)
         )
       ),
-      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx12(Flex3, { hAlign: "end", children: /* @__PURE__ */ jsx12(
+      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx13(Flex3, { hAlign: "end", children: /* @__PURE__ */ jsx13(
         AddButton2,
         {
           id: buttonId2(idSchema, "add"),
@@ -508,26 +526,26 @@ function ObjectFieldTemplate(props) {
 
 // src/SubmitButton/SubmitButton.tsx
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { Button as Button3, makeStyles as makeStyles7, tokens as tokens4 } from "@fluentui/react-components";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var useStyles7 = makeStyles7({
+import { Button as Button3, makeStyles as makeStyles8, tokens as tokens4 } from "@fluentui/react-components";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var useStyles8 = makeStyles8({
   buttonRow: {
     marginTop: tokens4.spacingVerticalL
   }
 });
 function SubmitButton({ uiSchema }) {
-  const classes = useStyles7();
+  const classes = useStyles8();
   const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx13("div", { className: classes.buttonRow, children: /* @__PURE__ */ jsx13(Button3, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ jsx14("div", { className: classes.buttonRow, children: /* @__PURE__ */ jsx14(Button3, { appearance: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
-import { Text as Text4, Divider, makeStyles as makeStyles8 } from "@fluentui/react-components";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var useStyles8 = makeStyles8({
+import { Text as Text4, Divider, makeStyles as makeStyles9 } from "@fluentui/react-components";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var useStyles9 = makeStyles9({
   root: {
     marginTop: "8px",
     marginBottom: "8px"
@@ -537,10 +555,10 @@ function TitleField({
   id,
   title
 }) {
-  const classes = useStyles8();
-  return /* @__PURE__ */ jsxs7("div", { id, className: classes.root, children: [
-    /* @__PURE__ */ jsx14(Text4, { as: "h5", size: 600, children: title }),
-    /* @__PURE__ */ jsx14(Divider, {})
+  const classes = useStyles9();
+  return /* @__PURE__ */ jsxs8("div", { id, className: classes.root, children: [
+    /* @__PURE__ */ jsx15(Text4, { as: "h5", size: 600, children: title }),
+    /* @__PURE__ */ jsx15(Divider, {})
   ] });
 }
 
@@ -550,10 +568,10 @@ import {
   buttonId as buttonId3,
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
-import { Field as Field2, Input as Input2, makeStyles as makeStyles9 } from "@fluentui/react-components";
+import { Field as Field2, Input as Input2, makeStyles as makeStyles10 } from "@fluentui/react-components";
 import { Flex as Flex4 } from "@fluentui/react-migration-v0-v9";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-var useStyles9 = makeStyles9({
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var useStyles10 = makeStyles10({
   input: {
     width: "100%"
   },
@@ -578,7 +596,7 @@ function WrapIfAdditionalTemplate(props) {
     registry
   } = props;
   const { templates, translateString } = registry;
-  const classes = useStyles9();
+  const classes = useStyles10();
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
   const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
@@ -589,11 +607,11 @@ function WrapIfAdditionalTemplate(props) {
     fontWeight: "bold"
   };
   if (!additional) {
-    return /* @__PURE__ */ jsx15("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx16("div", { className: classNames, style, children });
   }
   const handleBlur = ({ target }) => onKeyChange(target.value);
-  return /* @__PURE__ */ jsxs8(Flex4, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
-    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(Field2, { label: keyLabel, required, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs9(Flex4, { gap: "gap.medium", vAlign: "center", className: classNames, style, children: [
+    /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(Field2, { label: keyLabel, required, children: /* @__PURE__ */ jsx16(
       Input2,
       {
         required,
@@ -608,8 +626,8 @@ function WrapIfAdditionalTemplate(props) {
         }
       }
     ) }) }),
-    /* @__PURE__ */ jsx15("div", { children }),
-    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16("div", { children }),
+    /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
       RemoveButton2,
       {
         id: buttonId3(id, "remove"),
@@ -645,6 +663,7 @@ function generateTemplates() {
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
@@ -660,7 +679,7 @@ import {
   schemaRequiresTrueValue
 } from "@rjsf/utils";
 import { Checkbox } from "@fluentui/react-components";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     schema,
@@ -688,8 +707,8 @@ function CheckboxWidget(props) {
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    !hideLabel && !!description && /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    !hideLabel && description && /* @__PURE__ */ jsx17(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -699,7 +718,7 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       Checkbox,
       {
         id,
@@ -730,7 +749,7 @@ import {
 } from "@rjsf/utils";
 import { Label as Label2, Checkbox as Checkbox2 } from "@fluentui/react-components";
 import { Flex as Flex5 } from "@fluentui/react-migration-v0-v9";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function CheckboxesWidget({
   label,
   hideLabel,
@@ -756,15 +775,15 @@ function CheckboxesWidget({
   };
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
-  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
     labelValue2(
-      /* @__PURE__ */ jsx17(Label2, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ jsx18(Label2, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx17(Flex5, { column: !inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+    /* @__PURE__ */ jsx18(Flex5, { column: !inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = enumOptionsIsSelected(option.value, checkboxesValues);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx18(
         Checkbox2,
         {
           id: optionId(id, index),
@@ -793,7 +812,7 @@ import {
   optionId as optionId2
 } from "@rjsf/utils";
 import { Label as Label3, Radio, RadioGroup } from "@fluentui/react-components";
-import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function RadioWidget({
   id,
   options,
@@ -812,12 +831,12 @@ function RadioWidget({
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
   const selectedIndex = enumOptionsIndexForValue(value, enumOptions) ?? void 0;
-  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
     labelValue3(
-      /* @__PURE__ */ jsx18(Label3, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ jsx19(Label3, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       RadioGroup,
       {
         id,
@@ -830,7 +849,7 @@ function RadioWidget({
         "aria-describedby": ariaDescribedByIds4(id),
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          return /* @__PURE__ */ jsx18(
+          return /* @__PURE__ */ jsx19(
             Radio,
             {
               id: optionId2(id, index),
@@ -853,7 +872,7 @@ import {
   rangeSpec
 } from "@rjsf/utils";
 import { Label as Label4, Slider } from "@fluentui/react-components";
-import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
   const sliderProps = { value, label, id, name: id, ...rangeSpec(schema) };
@@ -862,12 +881,12 @@ function RangeWidget(props) {
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
     labelValue4(
-      /* @__PURE__ */ jsx19(Label4, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ jsx20(Label4, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       Slider,
       {
         disabled: disabled || readonly,
@@ -889,7 +908,7 @@ import {
   labelValue as labelValue5
 } from "@rjsf/utils";
 import { Dropdown, Field as Field3, Option } from "@fluentui/react-components";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function getValue(data, multiple) {
   if (multiple) {
     return data.selectedOptions;
@@ -930,13 +949,13 @@ function SelectWidget({
     return onChange(enumOptionsValueForIndex3(newValue, enumOptions, optEmptyVal));
   };
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Field3,
     {
       label: labelValue5(label, hideLabel),
       validationState: rawErrors.length ? "error" : void 0,
       required,
-      children: /* @__PURE__ */ jsxs13(
+      children: /* @__PURE__ */ jsxs14(
         Dropdown,
         {
           id,
@@ -952,10 +971,10 @@ function SelectWidget({
           selectedOptions: selectedIndexesAsArray,
           "aria-describedby": ariaDescribedByIds6(id),
           children: [
-            showPlaceholderOption && /* @__PURE__ */ jsx20(Option, { value: "", children: placeholder || "" }),
+            showPlaceholderOption && /* @__PURE__ */ jsx21(Option, { value: "", children: placeholder || "" }),
             Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
               const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-              return /* @__PURE__ */ jsx20(Option, { value: String(i), disabled: disabled2, children: label2 }, i);
+              return /* @__PURE__ */ jsx21(Option, { value: String(i), disabled: disabled2, children: label2 }, i);
             })
           ]
         }
@@ -966,13 +985,13 @@ function SelectWidget({
 var SelectWidget_default = SelectWidget;
 
 // src/TextareaWidget/TextareaWidget.tsx
-import { Label as Label5, Textarea, makeStyles as makeStyles10 } from "@fluentui/react-components";
+import { Label as Label5, Textarea, makeStyles as makeStyles11 } from "@fluentui/react-components";
 import {
   ariaDescribedByIds as ariaDescribedByIds7,
   labelValue as labelValue6
 } from "@rjsf/utils";
-import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
-var useStyles10 = makeStyles10({
+import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var useStyles11 = makeStyles11({
   label: {
     paddingTop: "2px",
     paddingBottom: "2px",
@@ -997,7 +1016,7 @@ function TextareaWidget(props) {
     options,
     schema
   } = props;
-  const classes = useStyles10();
+  const classes = useStyles11();
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
@@ -1005,12 +1024,12 @@ function TextareaWidget(props) {
   if (typeof options.rows === "string" || typeof options.rows === "number") {
     rows = options.rows;
   }
-  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
     labelValue6(
-      /* @__PURE__ */ jsx21(Label5, { htmlFor: id, required, disabled, className: classes.label, children: label }),
+      /* @__PURE__ */ jsx22(Label5, { htmlFor: id, required, disabled, className: classes.label, children: label }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       Textarea,
       {
         id,
@@ -1061,14 +1080,14 @@ var FluentForm_default = generateForm();
 // src/FluentUIRCFrameProvider.tsx
 import { FluentProvider, RendererProvider, createDOMRenderer, teamsLightTheme } from "@fluentui/react-components";
 import { useMemo } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var FluentWrapper = (props) => {
   const { children, targetDocument } = props;
   const renderer = useMemo(() => createDOMRenderer(targetDocument), [targetDocument]);
-  return /* @__PURE__ */ jsx22(RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ jsx22(FluentProvider, { targetDocument, theme: teamsLightTheme, children }) });
+  return /* @__PURE__ */ jsx23(RendererProvider, { renderer, targetDocument, children: /* @__PURE__ */ jsx23(FluentProvider, { targetDocument, theme: teamsLightTheme, children }) });
 };
 var __createFluentUIRCFrameProvider = (props) => ({ document }) => {
-  return /* @__PURE__ */ jsx22(FluentWrapper, { targetDocument: document, children: props.children });
+  return /* @__PURE__ */ jsx23(FluentWrapper, { targetDocument: document, children: props.children });
 };
 
 // src/index.ts