@okta/odyssey-react-mui 0.24.0 → 1.0.0

package/dist/Dialog.js

@@ -14,19 +14,21 @@ import _DialogContentText from "@mui/material/DialogContentText";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { Button, CloseIcon } from "./index.js";
+import { Button } from "./Button.js";
+import { CloseIcon } from "./icons.generated/index.js";
 import { memo, useState, useEffect, useRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Dialog = _ref => {
   let {
-    callToActionPrimaryComponent,
-    callToActionSecondaryComponent,
-    callToActionTertiaryComponent,
+    callToActionFirstComponent,
+    callToActionSecondComponent,
+    callToActionLastComponent,
     children,
     isOpen,
     onClose,
-    title
+    title,
+    ariaLabel
   } = _ref;
   const [isContentScrollable, setIsContentScrollable] = useState(false);
   const dialogContentRef = useRef(null);
@@ -54,19 +56,23 @@ const Dialog = _ref => {
     onClose: onClose,
     children: [_jsxs(_DialogTitle, {
       children: [title, _jsx(Button, {
-        variant: "floating",
+        ariaLabel: ariaLabel,
+        label: "",
         onClick: onClose,
-        startIcon: _jsx(CloseIcon, {})
+        size: "small",
+        startIcon: _jsx(CloseIcon, {}),
+        variant: "floating"
       })]
     }), _jsx(_DialogContent, {
       dividers: isContentScrollable,
       ref: dialogContentRef,
       children: content
-    }), (callToActionPrimaryComponent || callToActionSecondaryComponent || callToActionTertiaryComponent) && _jsxs(_DialogActions, {
-      children: [callToActionTertiaryComponent, callToActionSecondaryComponent, callToActionPrimaryComponent]
+    }), (callToActionFirstComponent || callToActionSecondComponent || callToActionLastComponent) && _jsxs(_DialogActions, {
+      children: [callToActionLastComponent, callToActionSecondComponent, callToActionFirstComponent]
     })]
   });
 };
 const MemoizedDialog = memo(Dialog);
+MemoizedDialog.displayName = "Dialog";
 export { MemoizedDialog as Dialog };
 //# sourceMappingURL=Dialog.js.map

package/dist/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["Button","CloseIcon","memo","useState","useEffect","useRef","jsx","_jsx","jsxs","_jsxs","Dialog","_ref","callToActionPrimaryComponent","callToActionSecondaryComponent","callToActionTertiaryComponent","children","isOpen","onClose","title","isContentScrollable","setIsContentScrollable","dialogContentRef","frameId","handleContentScroll","dialogContentElement","current","scrollHeight","clientHeight","requestAnimationFrame","cancelAnimationFrame","content","_DialogContentText","_Dialog","open","_DialogTitle","variant","onClick","startIcon","_DialogContent","dividers","ref","_DialogActions","MemoizedDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Dialog as MuiDialog } from \"@mui/material\";\nimport {\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n} from \"@mui/material\";\nimport { Button, CloseIcon } from \"./\";\nimport {\n  memo,\n  ReactNode,\n  useState,\n  useEffect,\n  useRef,\n  ReactElement,\n} from \"react\";\n\nexport type DialogProps = {\n  callToActionPrimaryComponent?: ReactElement<typeof Button>;\n  callToActionSecondaryComponent?: ReactElement<typeof Button>;\n  callToActionTertiaryComponent?: ReactElement<typeof Button>;\n  children: ReactNode | Array<ReactNode>;\n  onClose: () => void;\n  isOpen: boolean;\n  title: string;\n};\n\nconst Dialog = ({\n  callToActionPrimaryComponent,\n  callToActionSecondaryComponent,\n  callToActionTertiaryComponent,\n  children,\n  isOpen,\n  onClose,\n  title,\n}: DialogProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <DialogContentText>{children}</DialogContentText>\n    ) : (\n      children\n    );\n\n  return (\n    <MuiDialog open={isOpen} onClose={onClose}>\n      <DialogTitle>\n        {title}\n        <Button\n          variant=\"floating\"\n          onClick={onClose}\n          startIcon={<CloseIcon />}\n        />\n      </DialogTitle>\n      <DialogContent dividers={isContentScrollable} ref={dialogContentRef}>\n        {content}\n      </DialogContent>\n\n      {(callToActionPrimaryComponent ||\n        callToActionSecondaryComponent ||\n        callToActionTertiaryComponent) && (\n        <DialogActions>\n          {callToActionTertiaryComponent}\n          {callToActionSecondaryComponent}\n          {callToActionPrimaryComponent}\n        </DialogActions>\n      )}\n    </MuiDialog>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAmBSA,MAAM,EAAEC,SAAS;AAC1B,SACEC,IAAI,EAEJC,QAAQ,EACRC,SAAS,EACTC,MAAM,QAED,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAYf,MAAMC,MAAM,GAAGC,IAAA,IAQI;EAAA,IARH;IACdC,4BAA4B;IAC5BC,8BAA8B;IAC9BC,6BAA6B;IAC7BC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC;EACW,CAAC,GAAAP,IAAA;EACZ,MAAM,CAACQ,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAMkB,gBAAgB,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EAErDD,SAAS,CAAC,MAAM;IACd,IAAIkB,OAAe;IAEnB,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;MAChC,MAAMC,oBAAoB,GAAGH,gBAAgB,CAACI,OAAO;MACrD,IAAID,oBAAoB,EAAE;QACxBJ,sBAAsB,CACpBI,oBAAoB,CAACE,YAAY,GAAGF,oBAAoB,CAACG,YAC3D,CAAC;MACH;MACAL,OAAO,GAAGM,qBAAqB,CAACL,mBAAmB,CAAC;IACtD,CAAC;IAED,IAAIP,MAAM,EAAE;MACVM,OAAO,GAAGM,qBAAqB,CAACL,mBAAmB,CAAC;IACtD;IAEA,OAAO,MAAM;MACXM,oBAAoB,CAACP,OAAO,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZ,MAAMc,OAAO,GACX,OAAOf,QAAQ,KAAK,QAAQ,GAC1BR,IAAA,CAAAwB,kBAAA;IAAAhB,QAAA,EAAoBA;EAAQ,CAAoB,CAAC,GAEjDA,QACD;EAEH,OACEN,KAAA,CAAAuB,OAAA;IAAWC,IAAI,EAAEjB,MAAO;IAACC,OAAO,EAAEA,OAAQ;IAAAF,QAAA,GACxCN,KAAA,CAAAyB,YAAA;MAAAnB,QAAA,GACGG,KAAK,EACNX,IAAA,CAACP,MAAM;QACLmC,OAAO,EAAC,UAAU;QAClBC,OAAO,EAAEnB,OAAQ;QACjBoB,SAAS,EAAE9B,IAAA,CAACN,SAAS,IAAE;MAAE,CAC1B,CAAC;IAAA,CACS,CAAC,EACdM,IAAA,CAAA+B,cAAA;MAAeC,QAAQ,EAAEpB,mBAAoB;MAACqB,GAAG,EAAEnB,gBAAiB;MAAAN,QAAA,EACjEe;IAAO,CACK,CAAC,EAEf,CAAClB,4BAA4B,IAC5BC,8BAA8B,IAC9BC,6BAA6B,KAC7BL,KAAA,CAAAgC,cAAA;MAAA1B,QAAA,GACGD,6BAA6B,EAC7BD,8BAA8B,EAC9BD,4BAA4B;IAAA,CAChB,CAChB;EAAA,CACQ,CAAC;AAEhB,CAAC;AAED,MAAM8B,cAAc,GAAGxC,IAAI,CAACQ,MAAM,CAAC;AAEnC,SAASgC,cAAc,IAAIhC,MAAM"}
+{"version":3,"file":"Dialog.js","names":["Button","CloseIcon","memo","useState","useEffect","useRef","jsx","_jsx","jsxs","_jsxs","Dialog","_ref","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","title","ariaLabel","isContentScrollable","setIsContentScrollable","dialogContentRef","frameId","handleContentScroll","dialogContentElement","current","scrollHeight","clientHeight","requestAnimationFrame","cancelAnimationFrame","content","_DialogContentText","_Dialog","open","_DialogTitle","label","onClick","size","startIcon","variant","_DialogContent","dividers","ref","_DialogActions","MemoizedDialog","displayName"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Dialog as MuiDialog } from \"@mui/material\";\nimport {\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n} from \"@mui/material\";\nimport { Button } from \"./Button\";\nimport { CloseIcon } from \"./icons.generated\";\nimport {\n  memo,\n  ReactNode,\n  useState,\n  useEffect,\n  useRef,\n  ReactElement,\n} from \"react\";\n\nexport type DialogProps = {\n  /**\n   * An optional Button object to be situated in the Dialog footer. Should almost always be of variant `primary`.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer, alongside the `callToActionPrimaryComponent`.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer, alongside the other two `callToAction` components.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n  /**\n   * Callback that controls what happens when the Dialog is dismissed\n   */\n  onClose: () => void;\n  /**\n   * The title of the Dialog\n   */\n  title: string;\n  ariaLabel: string;\n};\n\nconst Dialog = ({\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  title,\n  ariaLabel,\n}: DialogProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <DialogContentText>{children}</DialogContentText>\n    ) : (\n      children\n    );\n\n  return (\n    <MuiDialog open={isOpen} onClose={onClose}>\n      <DialogTitle>\n        {title}\n        <Button\n          ariaLabel={ariaLabel}\n          label=\"\"\n          onClick={onClose}\n          size=\"small\"\n          startIcon={<CloseIcon />}\n          variant=\"floating\"\n        />\n      </DialogTitle>\n      <DialogContent dividers={isContentScrollable} ref={dialogContentRef}>\n        {content}\n      </DialogContent>\n\n      {(callToActionFirstComponent ||\n        callToActionSecondComponent ||\n        callToActionLastComponent) && (\n        <DialogActions>\n          {callToActionLastComponent}\n          {callToActionSecondComponent}\n          {callToActionFirstComponent}\n        </DialogActions>\n      )}\n    </MuiDialog>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAmBSA,MAAM;AAAA,SACNC,SAAS;AAClB,SACEC,IAAI,EAEJC,QAAQ,EACRC,SAAS,EACTC,MAAM,QAED,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkCf,MAAMC,MAAM,GAAGC,IAAA,IASI;EAAA,IATH;IACdC,0BAA0B;IAC1BC,2BAA2B;IAC3BC,yBAAyB;IACzBC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC;EACW,CAAC,GAAAR,IAAA;EACZ,MAAM,CAACS,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAMmB,gBAAgB,GAAGjB,MAAM,CAAiB,IAAI,CAAC;EAErDD,SAAS,CAAC,MAAM;IACd,IAAImB,OAAe;IAEnB,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;MAChC,MAAMC,oBAAoB,GAAGH,gBAAgB,CAACI,OAAO;MACrD,IAAID,oBAAoB,EAAE;QACxBJ,sBAAsB,CACpBI,oBAAoB,CAACE,YAAY,GAAGF,oBAAoB,CAACG,YAC3D,CAAC;MACH;MACAL,OAAO,GAAGM,qBAAqB,CAACL,mBAAmB,CAAC;IACtD,CAAC;IAED,IAAIR,MAAM,EAAE;MACVO,OAAO,GAAGM,qBAAqB,CAACL,mBAAmB,CAAC;IACtD;IAEA,OAAO,MAAM;MACXM,oBAAoB,CAACP,OAAO,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;EAEZ,MAAMe,OAAO,GACX,OAAOhB,QAAQ,KAAK,QAAQ,GAC1BR,IAAA,CAAAyB,kBAAA;IAAAjB,QAAA,EAAoBA;EAAQ,CAAoB,CAAC,GAEjDA,QACD;EAEH,OACEN,KAAA,CAAAwB,OAAA;IAAWC,IAAI,EAAElB,MAAO;IAACC,OAAO,EAAEA,OAAQ;IAAAF,QAAA,GACxCN,KAAA,CAAA0B,YAAA;MAAApB,QAAA,GACGG,KAAK,EACNX,IAAA,CAACP,MAAM;QACLmB,SAAS,EAAEA,SAAU;QACrBiB,KAAK,EAAC,EAAE;QACRC,OAAO,EAAEpB,OAAQ;QACjBqB,IAAI,EAAC,OAAO;QACZC,SAAS,EAAEhC,IAAA,CAACN,SAAS,IAAE,CAAE;QACzBuC,OAAO,EAAC;MAAU,CACnB,CAAC;IAAA,CACS,CAAC,EACdjC,IAAA,CAAAkC,cAAA;MAAeC,QAAQ,EAAEtB,mBAAoB;MAACuB,GAAG,EAAErB,gBAAiB;MAAAP,QAAA,EACjEgB;IAAO,CACK,CAAC,EAEf,CAACnB,0BAA0B,IAC1BC,2BAA2B,IAC3BC,yBAAyB,KACzBL,KAAA,CAAAmC,cAAA;MAAA7B,QAAA,GACGD,yBAAyB,EACzBD,2BAA2B,EAC3BD,0BAA0B;IAAA,CACd,CAChB;EAAA,CACQ,CAAC;AAEhB,CAAC;AAED,MAAMiC,cAAc,GAAG3C,IAAI,CAACQ,MAAM,CAAC;AACnCmC,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAInC,MAAM"}

package/dist/Field.js

@@ -1,6 +1,5 @@
 import _FormControl from "@mui/material/FormControl";
 import _FormLabel from "@mui/material/FormLabel";
-import _Typography from "@mui/material/Typography";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -17,10 +16,13 @@ import { memo, useMemo } from "react";
 import { FieldError } from "./FieldError.js";
 import { FieldHint } from "./FieldHint.js";
 import { FieldLabel } from "./FieldLabel.js";
-import { useUniqueId } from "./useUniqueId.js";
+import { Typography } from "./Typography.js";
+import { useFieldset } from "./FieldsetContext.js";
 import { useTranslation } from "react-i18next";
+import { useUniqueId } from "./useUniqueId.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const fieldTypeValues = ["single", "group"];
 const Field = _ref => {
   let {
     errorMessage,
@@ -28,7 +30,7 @@ const Field = _ref => {
     hasVisibleLabel,
     hint,
     id: idOverride,
-    isDisabled = false,
+    isDisabled: isDisabledProp = false,
     isRadioGroup = false,
     isOptional = false,
     label,
@@ -42,6 +44,10 @@ const Field = _ref => {
   const errorId = errorMessage ? `${id}-error` : undefined;
   const labelId = `${id}-label`;
   const ariaDescribedBy = useMemo(() => [hintId, errorId].join(" ").trim() || undefined, [errorId, hintId]);
+  const {
+    isDisabled: isFieldsetDisabled
+  } = useFieldset();
+  const isDisabled = useMemo(() => isDisabledProp || isFieldsetDisabled, [isDisabledProp, isFieldsetDisabled]);
   return _jsxs(_FormControl, {
     component: fieldType === "group" ? "fieldset" : "div",
     disabled: isDisabled,
@@ -49,7 +55,7 @@ const Field = _ref => {
     role: isRadioGroup ? "radiogroup" : undefined,
     children: [fieldType === "group" ? _jsxs(_FormLabel, {
       component: "legend",
-      children: [label, " ", isOptional && label && _jsxs(_Typography, {
+      children: [label, " ", isOptional && label && _jsxs(Typography, {
         component: "span",
         color: "textSecondary",
         children: ["(", t("fieldlabel.optional.text"), ")"]
@@ -73,5 +79,6 @@ const Field = _ref => {
   });
 };
 const MemoizedField = memo(Field);
+MemoizedField.displayName = "Field";
 export { MemoizedField as Field };
 //# sourceMappingURL=Field.js.map

package/dist/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","useUniqueId","useTranslation","jsxs","_jsxs","jsx","_jsx","Field","_ref","errorMessage","fieldType","hasVisibleLabel","hint","id","idOverride","isDisabled","isRadioGroup","isOptional","label","renderFieldComponent","t","hintId","undefined","errorId","labelId","ariaDescribedBy","join","trim","_FormControl","component","disabled","error","Boolean","role","children","_FormLabel","_Typography","color","inputId","text","MemoizedField"],"sources":["../src/Field.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n  Typography,\n} from \"@mui/material\";\nimport { FieldError } from \"./FieldError\";\nimport { FieldHint } from \"./FieldHint\";\nimport { FieldLabel } from \"./FieldLabel\";\nimport { useUniqueId } from \"./useUniqueId\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type FieldProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n   */\n  fieldType: \"single\" | \"group\";\n  hasVisibleLabel: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Important for narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * Important for determining if children inherit error state\n   */\n  isCheckboxGroup?: boolean;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Render-props function that sends back ARIA props to your field component.\n   */\n  renderFieldComponent: ({\n    ariaDescribedBy,\n    id,\n  }: {\n    ariaDescribedBy?: string;\n    id: string;\n  }) => ReactElement;\n};\n\nconst Field = ({\n  errorMessage,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  id: idOverride,\n  isDisabled = false,\n  isRadioGroup = false,\n  isOptional = false,\n  label,\n  renderFieldComponent,\n}: FieldProps) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorId = errorMessage ? `${id}-error` : undefined;\n  const labelId = `${id}-label`;\n\n  const ariaDescribedBy = useMemo(\n    () => [hintId, errorId].join(\" \").trim() || undefined,\n    [errorId, hintId]\n  );\n\n  return (\n    <MuiFormControl\n      component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n      role={isRadioGroup ? \"radiogroup\" : undefined}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\">\n          {label}{\" \"}\n          {isOptional && label && (\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.optional.text\")})\n            </Typography>\n          )}\n        </MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelId}\n          inputId={id}\n          isOptional={isOptional}\n          text={label}\n        />\n      )}\n\n      {hint && <FieldHint id={hintId} text={hint} />}\n\n      {renderFieldComponent({\n        ariaDescribedBy,\n        id,\n      })}\n\n      {errorMessage && <FieldError id={errorId} text={errorMessage} />}\n    </MuiFormControl>\n  );\n};\n\nconst MemoizedField = memo(Field);\n\nexport { MemoizedField as Field };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAgBC,OAAO,QAAQ,OAAO;AAAC,SAO3CC,UAAU;AAAA,SACVC,SAAS;AAAA,SACTC,UAAU;AAAA,SACVC,WAAW;AACpB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwD/C,MAAMC,KAAK,GAAGC,IAAA,IAWI;EAAA,IAXH;IACbC,YAAY;IACZC,SAAS;IACTC,eAAe;IACfC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,YAAY,GAAG,KAAK;IACpBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC;EACU,CAAC,GAAAX,IAAA;EACX,MAAM;IAAEY;EAAE,CAAC,GAAGlB,cAAc,CAAC,CAAC;EAE9B,MAAMW,EAAE,GAAGZ,WAAW,CAACa,UAAU,CAAC;EAClC,MAAMO,MAAM,GAAGT,IAAI,GAAI,GAAEC,EAAG,OAAM,GAAGS,SAAS;EAC9C,MAAMC,OAAO,GAAGd,YAAY,GAAI,GAAEI,EAAG,QAAO,GAAGS,SAAS;EACxD,MAAME,OAAO,GAAI,GAAEX,EAAG,QAAO;EAE7B,MAAMY,eAAe,GAAG5B,OAAO,CAC7B,MAAM,CAACwB,MAAM,EAAEE,OAAO,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC,CAACC,IAAI,CAAC,CAAC,IAAIL,SAAS,EACrD,CAACC,OAAO,EAAEF,MAAM,CAClB,CAAC;EAED,OACEjB,KAAA,CAAAwB,YAAA;IACEC,SAAS,EAAEnB,SAAS,KAAK,OAAO,GAAG,UAAU,GAAG,KAAM;IACtDoB,QAAQ,EAAEf,UAAW;IACrBgB,KAAK,EAAEC,OAAO,CAACvB,YAAY,CAAE;IAC7BwB,IAAI,EAAEjB,YAAY,GAAG,YAAY,GAAGM,SAAU;IAAAY,QAAA,GAE7CxB,SAAS,KAAK,OAAO,GACpBN,KAAA,CAAA+B,UAAA;MAAcN,SAAS,EAAC,QAAQ;MAAAK,QAAA,GAC7BhB,KAAK,EAAE,GAAG,EACVD,UAAU,IAAIC,KAAK,IAClBd,KAAA,CAAAgC,WAAA;QAAYP,SAAS,EAAC,MAAM;QAACQ,KAAK,EAAC,eAAe;QAAAH,QAAA,GAAC,GAChD,EAACd,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;MAAA,CAAY,CACb;IAAA,CACW,CAAC,GAEfd,IAAA,CAACN,UAAU;MACTW,eAAe,EAAEA,eAAgB;MACjCE,EAAE,EAAEW,OAAQ;MACZc,OAAO,EAAEzB,EAAG;MACZI,UAAU,EAAEA,UAAW;MACvBsB,IAAI,EAAErB;IAAM,CACb,CACF,EAEAN,IAAI,IAAIN,IAAA,CAACP,SAAS;MAACc,EAAE,EAAEQ,MAAO;MAACkB,IAAI,EAAE3B;IAAK,CAAE,CAAC,EAE7CO,oBAAoB,CAAC;MACpBM,eAAe;MACfZ;IACF,CAAC,CAAC,EAEDJ,YAAY,IAAIH,IAAA,CAACR,UAAU;MAACe,EAAE,EAAEU,OAAQ;MAACgB,IAAI,EAAE9B;IAAa,CAAE,CAAC;EAAA,CAClD,CAAC;AAErB,CAAC;AAED,MAAM+B,aAAa,GAAG5C,IAAI,CAACW,KAAK,CAAC;AAEjC,SAASiC,aAAa,IAAIjC,KAAK"}
+{"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","Typography","useFieldset","useTranslation","useUniqueId","jsxs","_jsxs","jsx","_jsx","fieldTypeValues","Field","_ref","errorMessage","fieldType","hasVisibleLabel","hint","id","idOverride","isDisabled","isDisabledProp","isRadioGroup","isOptional","label","renderFieldComponent","t","hintId","undefined","errorId","labelId","ariaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","role","children","_FormLabel","color","inputId","text","MemoizedField","displayName"],"sources":["../src/Field.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { FieldError } from \"./FieldError\";\nimport { FieldHint } from \"./FieldHint\";\nimport { FieldLabel } from \"./FieldLabel\";\nimport { Typography } from \"./Typography\";\nimport { useFieldset } from \"./FieldsetContext\";\nimport { useTranslation } from \"react-i18next\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const fieldTypeValues = [\"single\", \"group\"] as const;\n\nexport type FieldProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n   */\n  fieldType: (typeof fieldTypeValues)[number];\n  /**\n   * If `true`, the Field label will be shown\n   */\n  hasVisibleLabel: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Important for narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * Important for determining if children inherit error state\n   */\n  isCheckboxGroup?: boolean;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Render-props function that sends back ARIA props to your field component.\n   */\n  renderFieldComponent: ({\n    ariaDescribedBy,\n    id,\n  }: {\n    ariaDescribedBy?: string;\n    id: string;\n  }) => ReactElement;\n};\n\nconst Field = ({\n  errorMessage,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  id: idOverride,\n  isDisabled: isDisabledProp = false,\n  isRadioGroup = false,\n  isOptional = false,\n  label,\n  renderFieldComponent,\n}: FieldProps) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorId = errorMessage ? `${id}-error` : undefined;\n  const labelId = `${id}-label`;\n\n  const ariaDescribedBy = useMemo(\n    () => [hintId, errorId].join(\" \").trim() || undefined,\n    [errorId, hintId]\n  );\n\n  const { isDisabled: isFieldsetDisabled } = useFieldset();\n\n  const isDisabled = useMemo(\n    () => isDisabledProp || isFieldsetDisabled,\n    [isDisabledProp, isFieldsetDisabled]\n  );\n\n  return (\n    <MuiFormControl\n      component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n      role={isRadioGroup ? \"radiogroup\" : undefined}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\">\n          {label}{\" \"}\n          {isOptional && label && (\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.optional.text\")})\n            </Typography>\n          )}\n        </MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelId}\n          inputId={id}\n          isOptional={isOptional}\n          text={label}\n        />\n      )}\n\n      {hint && <FieldHint id={hintId} text={hint} />}\n\n      {renderFieldComponent({\n        ariaDescribedBy,\n        id,\n      })}\n\n      {errorMessage && <FieldError id={errorId} text={errorMessage} />}\n    </MuiFormControl>\n  );\n};\n\nconst MemoizedField = memo(Field);\nMemoizedField.displayName = \"Field\";\n\nexport { MemoizedField as Field };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAgBC,OAAO,QAAQ,OAAO;AAAC,SAM3CC,UAAU;AAAA,SACVC,SAAS;AAAA,SACTC,UAAU;AAAA,SACVC,UAAU;AAAA,SACVC,WAAW;AACpB,SAASC,cAAc,QAAQ,eAAe;AAAC,SACtCC,WAAW;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEpB,OAAO,MAAMC,eAAe,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AA2D3D,MAAMC,KAAK,GAAGC,IAAA,IAWI;EAAA,IAXH;IACbC,YAAY;IACZC,SAAS;IACTC,eAAe;IACfC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,EAAEC,cAAc,GAAG,KAAK;IAClCC,YAAY,GAAG,KAAK;IACpBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC;EACU,CAAC,GAAAZ,IAAA;EACX,MAAM;IAAEa;EAAE,CAAC,GAAGrB,cAAc,CAAC,CAAC;EAE9B,MAAMa,EAAE,GAAGZ,WAAW,CAACa,UAAU,CAAC;EAClC,MAAMQ,MAAM,GAAGV,IAAI,GAAI,GAAEC,EAAG,OAAM,GAAGU,SAAS;EAC9C,MAAMC,OAAO,GAAGf,YAAY,GAAI,GAAEI,EAAG,QAAO,GAAGU,SAAS;EACxD,MAAME,OAAO,GAAI,GAAEZ,EAAG,QAAO;EAE7B,MAAMa,eAAe,GAAGhC,OAAO,CAC7B,MAAM,CAAC4B,MAAM,EAAEE,OAAO,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC,CAACC,IAAI,CAAC,CAAC,IAAIL,SAAS,EACrD,CAACC,OAAO,EAAEF,MAAM,CAClB,CAAC;EAED,MAAM;IAAEP,UAAU,EAAEc;EAAmB,CAAC,GAAG9B,WAAW,CAAC,CAAC;EAExD,MAAMgB,UAAU,GAAGrB,OAAO,CACxB,MAAMsB,cAAc,IAAIa,kBAAkB,EAC1C,CAACb,cAAc,EAAEa,kBAAkB,CACrC,CAAC;EAED,OACE1B,KAAA,CAAA2B,YAAA;IACEC,SAAS,EAAErB,SAAS,KAAK,OAAO,GAAG,UAAU,GAAG,KAAM;IACtDsB,QAAQ,EAAEjB,UAAW;IACrBkB,KAAK,EAAEC,OAAO,CAACzB,YAAY,CAAE;IAC7B0B,IAAI,EAAElB,YAAY,GAAG,YAAY,GAAGM,SAAU;IAAAa,QAAA,GAE7C1B,SAAS,KAAK,OAAO,GACpBP,KAAA,CAAAkC,UAAA;MAAcN,SAAS,EAAC,QAAQ;MAAAK,QAAA,GAC7BjB,KAAK,EAAE,GAAG,EACVD,UAAU,IAAIC,KAAK,IAClBhB,KAAA,CAACL,UAAU;QAACiC,SAAS,EAAC,MAAM;QAACO,KAAK,EAAC,eAAe;QAAAF,QAAA,GAAC,GAChD,EAACf,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;MAAA,CAAY,CACb;IAAA,CACW,CAAC,GAEfhB,IAAA,CAACR,UAAU;MACTc,eAAe,EAAEA,eAAgB;MACjCE,EAAE,EAAEY,OAAQ;MACZc,OAAO,EAAE1B,EAAG;MACZK,UAAU,EAAEA,UAAW;MACvBsB,IAAI,EAAErB;IAAM,CACb,CACF,EAEAP,IAAI,IAAIP,IAAA,CAACT,SAAS;MAACiB,EAAE,EAAES,MAAO;MAACkB,IAAI,EAAE5B;IAAK,CAAE,CAAC,EAE7CQ,oBAAoB,CAAC;MACpBM,eAAe;MACfb;IACF,CAAC,CAAC,EAEDJ,YAAY,IAAIJ,IAAA,CAACV,UAAU;MAACkB,EAAE,EAAEW,OAAQ;MAACgB,IAAI,EAAE/B;IAAa,CAAE,CAAC;EAAA,CAClD,CAAC;AAErB,CAAC;AAED,MAAMgC,aAAa,GAAGhD,IAAI,CAACc,KAAK,CAAC;AACjCkC,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIlC,KAAK"}

package/dist/FieldError.js

@@ -1,3 +1,4 @@
+import _FormHelperText from "@mui/material/FormHelperText";
 /*!
  * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -11,7 +12,6 @@
  */
 
 import { memo } from "react";
-import { FormHelperText } from "./index.js";
 import { ScreenReaderText } from "./ScreenReaderText.js";
 import { useTranslation } from "react-i18next";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,7 +24,7 @@ const FieldError = _ref => {
   const {
     t
   } = useTranslation();
-  return _jsxs(FormHelperText, {
+  return _jsxs(_FormHelperText, {
     error: true,
     id: id,
     children: [_jsx(ScreenReaderText, {
@@ -33,5 +33,6 @@ const FieldError = _ref => {
   });
 };
 const MemoizedFieldError = memo(FieldError);
+MemoizedFieldError.displayName = "FieldError";
 export { MemoizedFieldError as FieldError };
 //# sourceMappingURL=FieldError.js.map

package/dist/FieldError.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.js","names":["memo","FormHelperText","ScreenReaderText","useTranslation","jsx","_jsx","jsxs","_jsxs","FieldError","_ref","id","text","t","error","children","MemoizedFieldError"],"sources":["../src/FieldError.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\n\nimport { FormHelperText } from \".\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type FieldErrorProps = {\n  id?: string;\n  text: string;\n};\n\nconst FieldError = ({ id, text }: FieldErrorProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <FormHelperText error id={id}>\n      <ScreenReaderText>{`${t(\n        \"fielderror.screenreader.text\"\n      )}:`}</ScreenReaderText>\n      {text}\n    </FormHelperText>\n  );\n};\n\nconst MemoizedFieldError = memo(FieldError);\n\nexport { MemoizedFieldError as FieldError };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAEpBC,cAAc;AAAA,SACdC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAO/C,MAAMC,UAAU,GAAGC,IAAA,IAAmC;EAAA,IAAlC;IAAEC,EAAE;IAAEC;EAAsB,CAAC,GAAAF,IAAA;EAC/C,MAAM;IAAEG;EAAE,CAAC,GAAGT,cAAc,CAAC,CAAC;EAE9B,OACEI,KAAA,CAACN,cAAc;IAACY,KAAK;IAACH,EAAE,EAAEA,EAAG;IAAAI,QAAA,GAC3BT,IAAA,CAACH,gBAAgB;MAAAY,QAAA,EAAG,GAAEF,CAAC,CACrB,8BACF,CAAE;IAAE,CAAmB,CAAC,EACvBD,IAAI;EAAA,CACS,CAAC;AAErB,CAAC;AAED,MAAMI,kBAAkB,GAAGf,IAAI,CAACQ,UAAU,CAAC;AAE3C,SAASO,kBAAkB,IAAIP,UAAU"}
+{"version":3,"file":"FieldError.js","names":["memo","ScreenReaderText","useTranslation","jsx","_jsx","jsxs","_jsxs","FieldError","_ref","id","text","t","_FormHelperText","error","children","MemoizedFieldError","displayName"],"sources":["../src/FieldError.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\n\nimport { FormHelperText } from \"@mui/material\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type FieldErrorProps = {\n  id?: string;\n  text: string;\n};\n\nconst FieldError = ({ id, text }: FieldErrorProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <FormHelperText error id={id}>\n      <ScreenReaderText>{`${t(\n        \"fielderror.screenreader.text\"\n      )}:`}</ScreenReaderText>\n      {text}\n    </FormHelperText>\n  );\n};\n\nconst MemoizedFieldError = memo(FieldError);\nMemoizedFieldError.displayName = \"FieldError\";\n\nexport { MemoizedFieldError as FieldError };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAGpBC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAO/C,MAAMC,UAAU,GAAGC,IAAA,IAAmC;EAAA,IAAlC;IAAEC,EAAE;IAAEC;EAAsB,CAAC,GAAAF,IAAA;EAC/C,MAAM;IAAEG;EAAE,CAAC,GAAGT,cAAc,CAAC,CAAC;EAE9B,OACEI,KAAA,CAAAM,eAAA;IAAgBC,KAAK;IAACJ,EAAE,EAAEA,EAAG;IAAAK,QAAA,GAC3BV,IAAA,CAACH,gBAAgB;MAAAa,QAAA,EAAG,GAAEH,CAAC,CACrB,8BACF,CAAE;IAAE,CAAmB,CAAC,EACvBD,IAAI;EAAA,CACS,CAAC;AAErB,CAAC;AAED,MAAMK,kBAAkB,GAAGf,IAAI,CAACO,UAAU,CAAC;AAC3CQ,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIR,UAAU"}

package/dist/FieldHint.js

@@ -1,3 +1,4 @@
+import _FormHelperText from "@mui/material/FormHelperText";
 /*!
  * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -11,18 +12,18 @@
  */
 
 import { memo } from "react";
-import { FormHelperText } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FieldHint = _ref => {
   let {
     id,
     text
   } = _ref;
-  return _jsx(FormHelperText, {
+  return _jsx(_FormHelperText, {
     id: id,
     children: text
   });
 };
 const MemoizedFieldHint = memo(FieldHint);
+MemoizedFieldHint.displayName = "FieldHint";
 export { MemoizedFieldHint as FieldHint };
 //# sourceMappingURL=FieldHint.js.map

package/dist/FieldHint.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHint.js","names":["memo","FormHelperText","jsx","_jsx","FieldHint","_ref","id","text","children","MemoizedFieldHint"],"sources":["../src/FieldHint.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\n\nimport { FormHelperText } from \"./\";\n\nexport type FieldHintProps = {\n  id?: string;\n  text: string;\n};\n\nconst FieldHint = ({ id, text }: FieldHintProps) => {\n  return <FormHelperText id={id}>{text}</FormHelperText>;\n};\n\nconst MemoizedFieldHint = memo(FieldHint);\n\nexport { MemoizedFieldHint as FieldHint };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAEpBC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAOvB,MAAMC,SAAS,GAAGC,IAAA,IAAkC;EAAA,IAAjC;IAAEC,EAAE;IAAEC;EAAqB,CAAC,GAAAF,IAAA;EAC7C,OAAOF,IAAA,CAACF,cAAc;IAACK,EAAE,EAAEA,EAAG;IAAAE,QAAA,EAAED;EAAI,CAAiB,CAAC;AACxD,CAAC;AAED,MAAME,iBAAiB,GAAGT,IAAI,CAACI,SAAS,CAAC;AAEzC,SAASK,iBAAiB,IAAIL,SAAS"}
+{"version":3,"file":"FieldHint.js","names":["memo","jsx","_jsx","FieldHint","_ref","id","text","_FormHelperText","children","MemoizedFieldHint","displayName"],"sources":["../src/FieldHint.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\n\nimport { FormHelperText } from \"@mui/material\";\n\nexport type FieldHintProps = {\n  id?: string;\n  text: string;\n};\n\nconst FieldHint = ({ id, text }: FieldHintProps) => {\n  return <FormHelperText id={id}>{text}</FormHelperText>;\n};\n\nconst MemoizedFieldHint = memo(FieldHint);\nMemoizedFieldHint.displayName = \"FieldHint\";\n\nexport { MemoizedFieldHint as FieldHint };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS7B,MAAMC,SAAS,GAAGC,IAAA,IAAkC;EAAA,IAAjC;IAAEC,EAAE;IAAEC;EAAqB,CAAC,GAAAF,IAAA;EAC7C,OAAOF,IAAA,CAAAK,eAAA;IAAgBF,EAAE,EAAEA,EAAG;IAAAG,QAAA,EAAEF;EAAI,CAAiB,CAAC;AACxD,CAAC;AAED,MAAMG,iBAAiB,GAAGT,IAAI,CAACG,SAAS,CAAC;AACzCM,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIN,SAAS"}

package/dist/FieldLabel.js

@@ -13,7 +13,7 @@ import _InputLabel from "@mui/material/InputLabel";
 import { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { ScreenReaderText } from "./ScreenReaderText.js";
-import { Typography } from "./index.js";
+import { Subordinate } from "./Typography.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FieldLabel = _ref => {
@@ -30,8 +30,9 @@ const FieldLabel = _ref => {
   const inputLabel = useMemo(() => _jsxs(_InputLabel, {
     htmlFor: inputId,
     id: id,
-    children: [text, isOptional && _jsx(Typography, {
-      variant: "subtitle1",
+    children: [_jsx("span", {
+      children: text
+    }), isOptional && _jsx(Subordinate, {
       children: t("fieldlabel.optional.text")
     })]
   }), [id, inputId, isOptional, text, t]);
@@ -40,5 +41,6 @@ const FieldLabel = _ref => {
   });
 };
 const MemoizedFieldLabel = memo(FieldLabel);
+MemoizedFieldLabel.displayName = "FieldLabel";
 export { MemoizedFieldLabel as FieldLabel };
 //# sourceMappingURL=FieldLabel.js.map

package/dist/FieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.js","names":["memo","useMemo","useTranslation","ScreenReaderText","Typography","jsx","_jsx","jsxs","_jsxs","FieldLabel","_ref","hasVisibleLabel","id","inputId","isOptional","text","t","inputLabel","_InputLabel","htmlFor","children","variant","MemoizedFieldLabel"],"sources":["../src/FieldLabel.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputLabel as MuiInputLabel } from \"@mui/material\";\nimport { memo, useMemo } from \"react\";\n\nimport { useTranslation } from \"react-i18next\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { Typography } from \".\";\n\nexport type FieldLabelProps = {\n  hasVisibleLabel: boolean;\n  id: string;\n  inputId: string;\n  isOptional: boolean;\n  text: string;\n};\n\nconst FieldLabel = ({\n  hasVisibleLabel,\n  id,\n  inputId,\n  isOptional,\n  text,\n}: FieldLabelProps) => {\n  const { t } = useTranslation();\n\n  const inputLabel = useMemo(\n    () => (\n      <MuiInputLabel htmlFor={inputId} id={id}>\n        {text}\n        {isOptional && (\n          <Typography variant=\"subtitle1\">\n            {t(\"fieldlabel.optional.text\")}\n          </Typography>\n        )}\n      </MuiInputLabel>\n    ),\n    [id, inputId, isOptional, text, t]\n  );\n\n  return hasVisibleLabel ? (\n    inputLabel\n  ) : (\n    <ScreenReaderText>{inputLabel}</ScreenReaderText>\n  );\n};\n\nconst MemoizedFieldLabel = memo(FieldLabel);\n\nexport { MemoizedFieldLabel as FieldLabel };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAErC,SAASC,cAAc,QAAQ,eAAe;AAAC,SACtCC,gBAAgB;AAAA,SAChBC,UAAU;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAUnB,MAAMC,UAAU,GAAGC,IAAA,IAMI;EAAA,IANH;IAClBC,eAAe;IACfC,EAAE;IACFC,OAAO;IACPC,UAAU;IACVC;EACe,CAAC,GAAAL,IAAA;EAChB,MAAM;IAAEM;EAAE,CAAC,GAAGd,cAAc,CAAC,CAAC;EAE9B,MAAMe,UAAU,GAAGhB,OAAO,CACxB,MACEO,KAAA,CAAAU,WAAA;IAAeC,OAAO,EAAEN,OAAQ;IAACD,EAAE,EAAEA,EAAG;IAAAQ,QAAA,GACrCL,IAAI,EACJD,UAAU,IACTR,IAAA,CAACF,UAAU;MAACiB,OAAO,EAAC,WAAW;MAAAD,QAAA,EAC5BJ,CAAC,CAAC,0BAA0B;IAAC,CACpB,CACb;EAAA,CACY,CAChB,EACD,CAACJ,EAAE,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAEC,CAAC,CACnC,CAAC;EAED,OAAOL,eAAe,GACpBM,UAAU,GAEVX,IAAA,CAACH,gBAAgB;IAAAiB,QAAA,EAAEH;EAAU,CAAmB,CACjD;AACH,CAAC;AAED,MAAMK,kBAAkB,GAAGtB,IAAI,CAACS,UAAU,CAAC;AAE3C,SAASa,kBAAkB,IAAIb,UAAU"}
+{"version":3,"file":"FieldLabel.js","names":["memo","useMemo","useTranslation","ScreenReaderText","Subordinate","jsx","_jsx","jsxs","_jsxs","FieldLabel","_ref","hasVisibleLabel","id","inputId","isOptional","text","t","inputLabel","_InputLabel","htmlFor","children","MemoizedFieldLabel","displayName"],"sources":["../src/FieldLabel.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputLabel as MuiInputLabel } from \"@mui/material\";\nimport { memo, useMemo } from \"react\";\n\nimport { useTranslation } from \"react-i18next\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { Subordinate } from \"./Typography\";\n\nexport type FieldLabelProps = {\n  hasVisibleLabel: boolean;\n  id: string;\n  inputId: string;\n  isOptional: boolean;\n  text: string;\n};\n\nconst FieldLabel = ({\n  hasVisibleLabel,\n  id,\n  inputId,\n  isOptional,\n  text,\n}: FieldLabelProps) => {\n  const { t } = useTranslation();\n\n  const inputLabel = useMemo(\n    () => (\n      <MuiInputLabel htmlFor={inputId} id={id}>\n        <span>{text}</span>\n        {isOptional && (\n          <Subordinate>{t(\"fieldlabel.optional.text\")}</Subordinate>\n        )}\n      </MuiInputLabel>\n    ),\n    [id, inputId, isOptional, text, t]\n  );\n\n  return hasVisibleLabel ? (\n    inputLabel\n  ) : (\n    <ScreenReaderText>{inputLabel}</ScreenReaderText>\n  );\n};\n\nconst MemoizedFieldLabel = memo(FieldLabel);\nMemoizedFieldLabel.displayName = \"FieldLabel\";\n\nexport { MemoizedFieldLabel as FieldLabel };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAErC,SAASC,cAAc,QAAQ,eAAe;AAAC,SACtCC,gBAAgB;AAAA,SAChBC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAUpB,MAAMC,UAAU,GAAGC,IAAA,IAMI;EAAA,IANH;IAClBC,eAAe;IACfC,EAAE;IACFC,OAAO;IACPC,UAAU;IACVC;EACe,CAAC,GAAAL,IAAA;EAChB,MAAM;IAAEM;EAAE,CAAC,GAAGd,cAAc,CAAC,CAAC;EAE9B,MAAMe,UAAU,GAAGhB,OAAO,CACxB,MACEO,KAAA,CAAAU,WAAA;IAAeC,OAAO,EAAEN,OAAQ;IAACD,EAAE,EAAEA,EAAG;IAAAQ,QAAA,GACtCd,IAAA;MAAAc,QAAA,EAAOL;IAAI,CAAO,CAAC,EAClBD,UAAU,IACTR,IAAA,CAACF,WAAW;MAAAgB,QAAA,EAAEJ,CAAC,CAAC,0BAA0B;IAAC,CAAc,CAC1D;EAAA,CACY,CAChB,EACD,CAACJ,EAAE,EAAEC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAEC,CAAC,CACnC,CAAC;EAED,OAAOL,eAAe,GACpBM,UAAU,GAEVX,IAAA,CAACH,gBAAgB;IAAAiB,QAAA,EAAEH;EAAU,CAAmB,CACjD;AACH,CAAC;AAED,MAAMI,kBAAkB,GAAGrB,IAAI,CAACS,UAAU,CAAC;AAC3CY,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIZ,UAAU"}

package/dist/Fieldset.js

@@ -1,3 +1,4 @@
+import _Box from "@mui/material/Box";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -9,9 +10,10 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
-import { memo } from "react";
-import { Box, Typography } from "./index.js";
+import { memo, useMemo } from "react";
+import { FieldsetContext } from "./FieldsetContext.js";
+import { Legend, Subordinate } from "./Typography.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { useUniqueId } from "./useUniqueId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,33 +22,40 @@ const Fieldset = _ref => {
     alert,
     children,
     description,
+    id: idOverride,
+    isDisabled = false,
     legend,
-    name,
-    id: idOverride
+    name
   } = _ref;
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const id = useUniqueId(idOverride);
-  return _jsxs(Box, {
+  const fieldsetContextValue = useMemo(() => ({
+    isDisabled
+  }), [isDisabled]);
+  return _jsxs(_Box, {
     component: "fieldset",
+    disabled: isDisabled,
     name: name,
     id: id,
     sx: {
-      maxWidth: theme => theme.mixins.maxWidth,
-      margin: theme => theme.spacing(0),
-      marginBlockEnd: theme => theme.spacing(4),
-      padding: theme => theme.spacing(0),
       border: "0",
+      margin: odysseyDesignTokens.Spacing0,
+      marginBlockEnd: odysseyDesignTokens.Spacing6,
+      maxWidth: odysseyDesignTokens.TypographyLineLengthMax,
+      padding: odysseyDesignTokens.Spacing0,
       "&:last-child": {
-        marginBlockEnd: theme => theme.spacing(0)
+        marginBlockEnd: odysseyDesignTokens.Spacing0
       }
     },
-    children: [_jsx(Typography, {
-      variant: "legend",
-      component: "legend",
+    children: [_jsx(Legend, {
       children: legend
-    }), description && _jsx(Typography, {
-      paragraph: true,
+    }), description && _jsx(Subordinate, {
+      component: "p",
       children: description
-    }), alert, children]
+    }), alert, _jsx(FieldsetContext.Provider, {
+      value: fieldsetContextValue,
+      children: children
+    })]
   });
 };
 const MemoizedFieldset = memo(Fieldset);

package/dist/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","names":["memo","Box","Typography","useUniqueId","jsx","_jsx","jsxs","_jsxs","Fieldset","_ref","alert","children","description","legend","name","id","idOverride","component","sx","maxWidth","theme","mixins","margin","spacing","marginBlockEnd","padding","border","variant","paragraph","MemoizedFieldset","displayName"],"sources":["../src/Fieldset.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement } from \"react\";\n\nimport { Box, Typography } from \".\";\nimport { Infobox } from \"./Infobox\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport type FieldsetProps = {\n  /**\n   * The title of the Fieldset\n   */\n  legend: string;\n  /**\n   * A supplementary description\n   */\n  description?: string;\n  /**\n   * The Field components within the Fieldset\n   */\n  children: ReactElement | Array<ReactElement>;\n  /**\n   * An Infobox indicating a Fieldset-wide error or status update.\n   */\n  alert?: ReactElement<typeof Infobox>;\n  /**\n   * The name associated with the group.\n   */\n  name?: string;\n  // /**\n  //  * If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>.\n  //  * They won't receive any browsing events, like mouse clicks or focus-related events.\n  //  * Note that form elements inside the <legend> element won't be disabled.\n  //  */\n  // NOTE: Functionality is currently disabled. This will correctly disable child <input>s, but will not pass `isDisabled` to the child components.\n  // isDisabled?: boolean;\n  /**\n   * Defines a unique identifier (ID) which must be unique in the whole document.\n   */\n  id?: string;\n};\n\nconst Fieldset = ({\n  alert,\n  children,\n  description,\n  legend,\n  name,\n  id: idOverride,\n}: // isDisabled,\nFieldsetProps) => {\n  const id = useUniqueId(idOverride);\n\n  return (\n    <Box\n      component=\"fieldset\"\n      // disabled={isDisabled}\n      name={name}\n      id={id}\n      sx={{\n        maxWidth: (theme) => theme.mixins.maxWidth,\n        margin: (theme) => theme.spacing(0),\n        marginBlockEnd: (theme) => theme.spacing(4),\n        padding: (theme) => theme.spacing(0),\n        border: \"0\",\n\n        \"&:last-child\": {\n          marginBlockEnd: (theme) => theme.spacing(0),\n        },\n      }}\n    >\n      <Typography variant=\"legend\" component=\"legend\">\n        {legend}\n      </Typography>\n      {description && <Typography paragraph>{description}</Typography>}\n      {alert}\n      {children}\n    </Box>\n  );\n};\n\nconst MemoizedFieldset = memo(Fieldset);\nMemoizedFieldset.displayName = \"Fieldset\";\n\nexport { MemoizedFieldset as Fieldset };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAsB,OAAO;AAAC,SAElCC,GAAG,EAAEC,UAAU;AAAA,SAEfC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAoCpB,MAAMC,QAAQ,GAAGC,IAAA,IAQC;EAAA,IARA;IAChBC,KAAK;IACLC,QAAQ;IACRC,WAAW;IACXC,MAAM;IACNC,IAAI;IACJC,EAAE,EAAEC;EAEM,CAAC,GAAAP,IAAA;EACX,MAAMM,EAAE,GAAGZ,WAAW,CAACa,UAAU,CAAC;EAElC,OACET,KAAA,CAACN,GAAG;IACFgB,SAAS,EAAC,UAAU;IAEpBH,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEA,EAAG;IACPG,EAAE,EAAE;MACFC,QAAQ,EAAGC,KAAK,IAAKA,KAAK,CAACC,MAAM,CAACF,QAAQ;MAC1CG,MAAM,EAAGF,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC;MACnCC,cAAc,EAAGJ,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC;MAC3CE,OAAO,EAAGL,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC;MACpCG,MAAM,EAAE,GAAG;MAEX,cAAc,EAAE;QACdF,cAAc,EAAGJ,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC;MAC5C;IACF,CAAE;IAAAZ,QAAA,GAEFN,IAAA,CAACH,UAAU;MAACyB,OAAO,EAAC,QAAQ;MAACV,SAAS,EAAC,QAAQ;MAAAN,QAAA,EAC5CE;IAAM,CACG,CAAC,EACZD,WAAW,IAAIP,IAAA,CAACH,UAAU;MAAC0B,SAAS;MAAAjB,QAAA,EAAEC;IAAW,CAAa,CAAC,EAC/DF,KAAK,EACLC,QAAQ;EAAA,CACN,CAAC;AAEV,CAAC;AAED,MAAMkB,gBAAgB,GAAG7B,IAAI,CAACQ,QAAQ,CAAC;AACvCqB,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAIrB,QAAQ"}
+{"version":3,"file":"Fieldset.js","names":["memo","useMemo","FieldsetContext","Legend","Subordinate","useOdysseyDesignTokens","useUniqueId","jsx","_jsx","jsxs","_jsxs","Fieldset","_ref","alert","children","description","id","idOverride","isDisabled","legend","name","odysseyDesignTokens","fieldsetContextValue","_Box","component","disabled","sx","border","margin","Spacing0","marginBlockEnd","Spacing6","maxWidth","TypographyLineLengthMax","padding","Provider","value","MemoizedFieldset","displayName"],"sources":["../src/Fieldset.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Box } from \"@mui/material\";\nimport { memo, ReactElement, useMemo } from \"react\";\n\nimport { Callout } from \"./Callout\";\nimport { FieldsetContext } from \"./FieldsetContext\";\nimport { Legend, Subordinate } from \"./Typography\";\nimport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport type FieldsetProps = {\n  /**\n   * A Callout indicating a Fieldset-wide error or status update.\n   */\n  alert?: ReactElement<typeof Callout>;\n  /**\n   * The Field components within the Fieldset\n   */\n  children: ReactElement | Array<ReactElement>;\n  /**\n   * A supplementary description\n   */\n  description?: string;\n  /**\n   * Defines a unique identifier (ID) which must be unique in the whole document.\n   */\n  id?: string;\n  /**\n   * Disables the component and any wrapped input fields.\n   */\n  isDisabled?: boolean;\n  /**\n   * The title of the Fieldset\n   */\n  legend: string;\n  /**\n   * The name associated with the group.\n   */\n  name?: string;\n};\n\nconst Fieldset = ({\n  alert,\n  children,\n  description,\n  id: idOverride,\n  isDisabled = false,\n  legend,\n  name,\n}: FieldsetProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const id = useUniqueId(idOverride);\n\n  const fieldsetContextValue = useMemo(\n    () => ({\n      isDisabled,\n    }),\n    [isDisabled]\n  );\n\n  return (\n    <Box\n      component=\"fieldset\"\n      disabled={isDisabled}\n      name={name}\n      id={id}\n      sx={{\n        border: \"0\",\n        margin: odysseyDesignTokens.Spacing0,\n        marginBlockEnd: odysseyDesignTokens.Spacing6,\n        maxWidth: odysseyDesignTokens.TypographyLineLengthMax,\n        padding: odysseyDesignTokens.Spacing0,\n\n        \"&:last-child\": {\n          marginBlockEnd: odysseyDesignTokens.Spacing0,\n        },\n      }}\n    >\n      <Legend>{legend}</Legend>\n\n      {description && <Subordinate component=\"p\">{description}</Subordinate>}\n\n      {alert}\n\n      <FieldsetContext.Provider value={fieldsetContextValue}>\n        {children}\n      </FieldsetContext.Provider>\n    </Box>\n  );\n};\n\nconst MemoizedFieldset = memo(Fieldset);\nMemoizedFieldset.displayName = \"Fieldset\";\n\nexport { MemoizedFieldset as Fieldset };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,OAAO,QAAQ,OAAO;AAAC,SAG3CC,eAAe;AAAA,SACfC,MAAM,EAAEC,WAAW;AAAA,SACnBC,sBAAsB;AAAA,SACtBC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAiCpB,MAAMC,QAAQ,GAAGC,IAAA,IAQI;EAAA,IARH;IAChBC,KAAK;IACLC,QAAQ;IACRC,WAAW;IACXC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,MAAM;IACNC;EACa,CAAC,GAAAR,IAAA;EACd,MAAMS,mBAAmB,GAAGhB,sBAAsB,CAAC,CAAC;EACpD,MAAMW,EAAE,GAAGV,WAAW,CAACW,UAAU,CAAC;EAElC,MAAMK,oBAAoB,GAAGrB,OAAO,CAClC,OAAO;IACLiB;EACF,CAAC,CAAC,EACF,CAACA,UAAU,CACb,CAAC;EAED,OACER,KAAA,CAAAa,IAAA;IACEC,SAAS,EAAC,UAAU;IACpBC,QAAQ,EAAEP,UAAW;IACrBE,IAAI,EAAEA,IAAK;IACXJ,EAAE,EAAEA,EAAG;IACPU,EAAE,EAAE;MACFC,MAAM,EAAE,GAAG;MACXC,MAAM,EAAEP,mBAAmB,CAACQ,QAAQ;MACpCC,cAAc,EAAET,mBAAmB,CAACU,QAAQ;MAC5CC,QAAQ,EAAEX,mBAAmB,CAACY,uBAAuB;MACrDC,OAAO,EAAEb,mBAAmB,CAACQ,QAAQ;MAErC,cAAc,EAAE;QACdC,cAAc,EAAET,mBAAmB,CAACQ;MACtC;IACF,CAAE;IAAAf,QAAA,GAEFN,IAAA,CAACL,MAAM;MAAAW,QAAA,EAAEK;IAAM,CAAS,CAAC,EAExBJ,WAAW,IAAIP,IAAA,CAACJ,WAAW;MAACoB,SAAS,EAAC,GAAG;MAAAV,QAAA,EAAEC;IAAW,CAAc,CAAC,EAErEF,KAAK,EAENL,IAAA,CAACN,eAAe,CAACiC,QAAQ;MAACC,KAAK,EAAEd,oBAAqB;MAAAR,QAAA,EACnDA;IAAQ,CACe,CAAC;EAAA,CACxB,CAAC;AAEV,CAAC;AAED,MAAMuB,gBAAgB,GAAGrC,IAAI,CAACW,QAAQ,CAAC;AACvC0B,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAI1B,QAAQ"}

package/{src/theme/useTheme.ts → dist/FieldsetContext.js}

@@ -10,9 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useTheme as useMuiTheme } from "@mui/material/styles";
-
-import type { OdysseyTheme } from "./OdysseyTheme";
-
-export const useTheme = (...args: Parameters<typeof useMuiTheme>) =>
-  useMuiTheme<OdysseyTheme>(...args);
+import { createContext, useContext } from "react";
+export const FieldsetContext = createContext({
+  isDisabled: false
+});
+export const useFieldset = () => useContext(FieldsetContext);
+//# sourceMappingURL=FieldsetContext.js.map

package/dist/FieldsetContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldsetContext.js","names":["createContext","useContext","FieldsetContext","isDisabled","useFieldset"],"sources":["../src/FieldsetContext.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { createContext, useContext } from \"react\";\n\nexport type FieldsetContextValue = {\n  isDisabled: boolean;\n};\n\nexport const FieldsetContext = createContext<FieldsetContextValue>({\n  isDisabled: false,\n});\n\nexport const useFieldset = () => useContext(FieldsetContext);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAMjD,OAAO,MAAMC,eAAe,GAAGF,aAAa,CAAuB;EACjEG,UAAU,EAAE;AACd,CAAC,CAAC;AAEF,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAMH,UAAU,CAACC,eAAe,CAAC"}

package/dist/Form.js

@@ -1,3 +1,4 @@
+import _Box from "@mui/material/Box";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -11,18 +12,21 @@
  */
 
 import { memo } from "react";
-import { Box, Typography } from "./index.js";
+import { Heading4, Support } from "./Typography.js";
 import { useUniqueId } from "./useUniqueId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const formEncodingTypeValues = ["application/x-www-form-urlencoded", "application/json", "multipart/form-data", "text/plain"];
+export const formAutoCompleteTypeValues = ["on", "off"];
+export const formMethodValues = ["post", "get", "dialog"];
 const Form = _ref => {
   let {
     alert,
+    autoCompleteType,
     children,
     description,
     encodingType,
     formActions,
-    hasAutoComplete,
     id: idOverride,
     method,
     name,
@@ -31,9 +35,9 @@ const Form = _ref => {
     title
   } = _ref;
   const id = useUniqueId(idOverride);
-  return _jsxs(Box, {
+  return _jsxs(_Box, {
     component: "form",
-    autoComplete: hasAutoComplete,
+    autoComplete: autoCompleteType,
     name: name,
     encType: encodingType,
     method: method,
@@ -45,19 +49,27 @@ const Form = _ref => {
       margin: theme => theme.spacing(0),
       padding: theme => theme.spacing(0)
     },
-    children: [title && _jsx(Typography, {
-      variant: "h4",
-      component: "h1",
-      children: title
-    }), description && _jsx(Typography, {
-      paragraph: true,
-      children: description
-    }), alert, children, formActions && _jsx(Box, {
+    children: [_jsxs(_Box, {
+      component: "div",
+      sx: {
+        marginBlockEnd: theme => theme.spacing(4)
+      },
+      children: [title && _jsx(Heading4, {
+        component: "h1",
+        children: title
+      }), description && _jsx(Support, {
+        children: description
+      }), alert]
+    }), _jsx(_Box, {
+      component: "div",
+      children: children
+    }), formActions && _jsx(_Box, {
       component: "div",
       sx: {
         display: "flex",
         justifyContent: "flex-start",
-        gap: theme => theme.spacing(1)
+        gap: theme => theme.spacing(1),
+        marginBlockStart: theme => theme.spacing(7)
       },
       children: formActions
     })]

package/dist/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":["memo","Box","Typography","useUniqueId","jsx","_jsx","jsxs","_jsxs","Form","_ref","alert","children","description","encodingType","formActions","hasAutoComplete","id","idOverride","method","name","noValidate","target","title","component","autoComplete","encType","sx","maxWidth","theme","mixins","margin","spacing","padding","variant","paragraph","display","justifyContent","gap","MemoizedForm","displayName"],"sources":["../src/Form.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement } from \"react\";\n\nimport { Box, Typography } from \"./\";\nimport { Button } from \"./Button\";\nimport { Infobox } from \"./Infobox\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport type FormProps = {\n  /**\n   * The title of the Form\n   */\n  title?: string;\n  /**\n   * A supplementary description\n   */\n  description?: string;\n  /**\n   * The Field or FieldSet components within the Form\n   */\n  children: ReactElement | Array<ReactElement>;\n  /**\n   * An Infobox indicating a Form-wide error or status update.\n   */\n  alert?: ReactElement<typeof Infobox>;\n  /**\n   * Indicates whether input elements can by default have their values automatically completed by the browser.\n   * `autocomplete` attributes on form elements override it on <form>\n   */\n  hasAutoComplete?: \"on\" | \"off\" | undefined;\n  /**\n   * The name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.\n   */\n  name: string;\n  /**\n   * This Boolean attribute indicates that the form shouldn't be validated when submitted.\n   * If this attribute is not set (and therefore the form is validated),\n   * it can be overridden by a formnovalidate attribute on a <button>, <input type=\"submit\">, or <input type=\"image\"> element belonging to the form.\n   */\n  noValidate?: boolean;\n  /**\n   * If the value of the method attribute is post, enctype is the MIME type of the form submission.\n   * This value can be overridden by formenctype attributes on <button>, <input type=\"submit\">, or <input type=\"image\"> elements.\n   */\n  encodingType?:\n    | \"application/x-www-form-urlencoded\"\n    | \"multipart/form-data\"\n    | \"text/plain\"\n    | undefined;\n  /**\n   * The HTTP method to submit the form with.\n   * This value is overridden by formmethod attributes on <button>, <input type=\"submit\">, or <input type=\"image\"> elements.\n   */\n  method?: \"post\" | \"get\" | \"dialog\" | undefined;\n  /**\n   * Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context (for example, tab, window, or iframe).\n   * This value can be overridden by a formtarget attribute on a <button>, <input type=\"submit\">, or <input type=\"image\"> element.\n   */\n  target?: \"post\" | \"get\" | \"dialog\" | undefined;\n  /**\n   * The Field or FieldGroup components within the Form\n   */\n  formActions?:\n    | ReactElement<typeof Button>\n    | Array<ReactElement<typeof Button>>;\n  /**\n   * Defines a unique identifier (ID) which must be unique in the whole document.\n   */\n  id?: string;\n};\n\nconst Form = ({\n  alert,\n  children,\n  description,\n  encodingType,\n  formActions,\n  hasAutoComplete,\n  id: idOverride,\n  method,\n  name,\n  noValidate = false,\n  target,\n  title,\n}: FormProps) => {\n  const id = useUniqueId(idOverride);\n\n  return (\n    <Box\n      component=\"form\"\n      autoComplete={hasAutoComplete}\n      name={name}\n      encType={encodingType}\n      method={method}\n      noValidate={noValidate}\n      target={target}\n      id={id}\n      sx={{\n        maxWidth: (theme) => theme.mixins.maxWidth,\n        margin: (theme) => theme.spacing(0),\n        padding: (theme) => theme.spacing(0),\n      }}\n    >\n      {title && (\n        <Typography variant=\"h4\" component=\"h1\">\n          {title}\n        </Typography>\n      )}\n      {description && <Typography paragraph>{description}</Typography>}\n      {alert}\n      {children}\n      {formActions && (\n        <Box\n          component=\"div\"\n          sx={{\n            display: \"flex\",\n            justifyContent: \"flex-start\",\n            gap: (theme) => theme.spacing(1),\n          }}\n        >\n          {formActions}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedForm = memo(Form);\nMemoizedForm.displayName = \"Form\";\n\nexport { MemoizedForm as Form };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAsB,OAAO;AAAC,SAElCC,GAAG,EAAEC,UAAU;AAAA,SAGfC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAiEpB,MAAMC,IAAI,GAAGC,IAAA,IAaI;EAAA,IAbH;IACZC,KAAK;IACLC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,WAAW;IACXC,eAAe;IACfC,EAAE,EAAEC,UAAU;IACdC,MAAM;IACNC,IAAI;IACJC,UAAU,GAAG,KAAK;IAClBC,MAAM;IACNC;EACS,CAAC,GAAAb,IAAA;EACV,MAAMO,EAAE,GAAGb,WAAW,CAACc,UAAU,CAAC;EAElC,OACEV,KAAA,CAACN,GAAG;IACFsB,SAAS,EAAC,MAAM;IAChBC,YAAY,EAAET,eAAgB;IAC9BI,IAAI,EAAEA,IAAK;IACXM,OAAO,EAAEZ,YAAa;IACtBK,MAAM,EAAEA,MAAO;IACfE,UAAU,EAAEA,UAAW;IACvBC,MAAM,EAAEA,MAAO;IACfL,EAAE,EAAEA,EAAG;IACPU,EAAE,EAAE;MACFC,QAAQ,EAAGC,KAAK,IAAKA,KAAK,CAACC,MAAM,CAACF,QAAQ;MAC1CG,MAAM,EAAGF,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC;MACnCC,OAAO,EAAGJ,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC;IACrC,CAAE;IAAApB,QAAA,GAEDW,KAAK,IACJjB,IAAA,CAACH,UAAU;MAAC+B,OAAO,EAAC,IAAI;MAACV,SAAS,EAAC,IAAI;MAAAZ,QAAA,EACpCW;IAAK,CACI,CACb,EACAV,WAAW,IAAIP,IAAA,CAACH,UAAU;MAACgC,SAAS;MAAAvB,QAAA,EAAEC;IAAW,CAAa,CAAC,EAC/DF,KAAK,EACLC,QAAQ,EACRG,WAAW,IACVT,IAAA,CAACJ,GAAG;MACFsB,SAAS,EAAC,KAAK;MACfG,EAAE,EAAE;QACFS,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE,YAAY;QAC5BC,GAAG,EAAGT,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC;MACjC,CAAE;MAAApB,QAAA,EAEDG;IAAW,CACT,CACN;EAAA,CACE,CAAC;AAEV,CAAC;AAED,MAAMwB,YAAY,GAAGtC,IAAI,CAACQ,IAAI,CAAC;AAC/B8B,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAI9B,IAAI"}
+{"version":3,"file":"Form.js","names":["memo","Heading4","Support","useUniqueId","jsx","_jsx","jsxs","_jsxs","formEncodingTypeValues","formAutoCompleteTypeValues","formMethodValues","Form","_ref","alert","autoCompleteType","children","description","encodingType","formActions","id","idOverride","method","name","noValidate","target","title","_Box","component","autoComplete","encType","sx","maxWidth","theme","mixins","margin","spacing","padding","marginBlockEnd","display","justifyContent","gap","marginBlockStart","MemoizedForm","displayName"],"sources":["../src/Form.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement } from \"react\";\n\nimport { Box } from \"@mui/material\";\nimport { Button } from \"./Button\";\nimport { Callout } from \"./Callout\";\nimport { Heading4, Support } from \"./Typography\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const formEncodingTypeValues = [\n  \"application/x-www-form-urlencoded\",\n  \"application/json\",\n  \"multipart/form-data\",\n  \"text/plain\",\n] as const;\nexport const formAutoCompleteTypeValues = [\"on\", \"off\"] as const;\nexport const formMethodValues = [\"post\", \"get\", \"dialog\"] as const;\n\nexport type FormProps = {\n  /**\n   * A Callout indicating a Form-wide error or status update.\n   */\n  alert?: ReactElement<typeof Callout>;\n  /**\n   * Indicates whether input elements can by default have their values automatically completed by the browser.\n   * `autocomplete` attributes on form elements override it on <form>\n   */\n  autoCompleteType?: (typeof formAutoCompleteTypeValues)[number];\n  /**\n   * The Field or FieldSet components within the Form\n   */\n  children: ReactElement | Array<ReactElement>;\n  /**\n   * A supplementary description\n   */\n  description?: string;\n  /**\n   * If the value of the method attribute is post, enctype is the MIME type of the form submission.\n   * This value can be overridden by formenctype attributes on <button>, <input type=\"submit\">, or <input type=\"image\"> elements.\n   */\n  encodingType?: (typeof formEncodingTypeValues)[number];\n  /**\n   * The Field or FieldGroup components within the Form\n   */\n  formActions?:\n    | ReactElement<typeof Button>\n    | Array<ReactElement<typeof Button>>;\n  /**\n   * Defines a unique identifier (ID) which must be unique in the whole document.\n   */\n  id?: string;\n  /**\n   * The HTTP method to submit the form with.\n   * This value is overridden by formmethod attributes on <button>, <input type=\"submit\">, or <input type=\"image\"> elements.\n   */\n  method?: (typeof formMethodValues)[number];\n  /**\n   * The name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.\n   */\n  name: string;\n  /**\n   * This Boolean attribute indicates that the form shouldn't be validated when submitted.\n   * If this attribute is not set (and therefore the form is validated),\n   * it can be overridden by a formnovalidate attribute on a <button>, <input type=\"submit\">, or <input type=\"image\"> element belonging to the form.\n   */\n  noValidate?: boolean;\n  /**\n   * Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context (for example, tab, window, or iframe).\n   * This value can be overridden by a formtarget attribute on a <button>, <input type=\"submit\">, or <input type=\"image\"> element.\n   */\n  target?: string;\n  /**\n   * The title of the Form\n   */\n  title?: string;\n};\n\nconst Form = ({\n  alert,\n  autoCompleteType,\n  children,\n  description,\n  encodingType,\n  formActions,\n  id: idOverride,\n  method,\n  name,\n  noValidate = false,\n  target,\n  title,\n}: FormProps) => {\n  const id = useUniqueId(idOverride);\n\n  return (\n    <Box\n      component=\"form\"\n      autoComplete={autoCompleteType}\n      name={name}\n      encType={encodingType}\n      method={method}\n      noValidate={noValidate}\n      target={target}\n      id={id}\n      sx={{\n        maxWidth: (theme) => theme.mixins.maxWidth,\n        margin: (theme) => theme.spacing(0),\n        padding: (theme) => theme.spacing(0),\n      }}\n    >\n      <Box\n        component=\"div\"\n        sx={{\n          marginBlockEnd: (theme) => theme.spacing(4),\n        }}\n      >\n        {title && <Heading4 component=\"h1\">{title}</Heading4>}\n        {description && <Support>{description}</Support>}\n        {alert}\n      </Box>\n      <Box component=\"div\">{children}</Box>\n      {formActions && (\n        <Box\n          component=\"div\"\n          sx={{\n            display: \"flex\",\n            justifyContent: \"flex-start\",\n            gap: (theme) => theme.spacing(1),\n            marginBlockStart: (theme) => theme.spacing(7),\n          }}\n        >\n          {formActions}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedForm = memo(Form);\nMemoizedForm.displayName = \"Form\";\n\nexport { MemoizedForm as Form };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAsB,OAAO;AAAC,SAKlCC,QAAQ,EAAEC,OAAO;AAAA,SACjBC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEpB,OAAO,MAAMC,sBAAsB,GAAG,CACpC,mCAAmC,EACnC,kBAAkB,EAClB,qBAAqB,EACrB,YAAY,CACJ;AACV,OAAO,MAAMC,0BAA0B,GAAG,CAAC,IAAI,EAAE,KAAK,CAAU;AAChE,OAAO,MAAMC,gBAAgB,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAU;AA6DlE,MAAMC,IAAI,GAAGC,IAAA,IAaI;EAAA,IAbH;IACZC,KAAK;IACLC,gBAAgB;IAChBC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC,WAAW;IACXC,EAAE,EAAEC,UAAU;IACdC,MAAM;IACNC,IAAI;IACJC,UAAU,GAAG,KAAK;IAClBC,MAAM;IACNC;EACS,CAAC,GAAAb,IAAA;EACV,MAAMO,EAAE,GAAGhB,WAAW,CAACiB,UAAU,CAAC;EAElC,OACEb,KAAA,CAAAmB,IAAA;IACEC,SAAS,EAAC,MAAM;IAChBC,YAAY,EAAEd,gBAAiB;IAC/BQ,IAAI,EAAEA,IAAK;IACXO,OAAO,EAAEZ,YAAa;IACtBI,MAAM,EAAEA,MAAO;IACfE,UAAU,EAAEA,UAAW;IACvBC,MAAM,EAAEA,MAAO;IACfL,EAAE,EAAEA,EAAG;IACPW,EAAE,EAAE;MACFC,QAAQ,EAAGC,KAAK,IAAKA,KAAK,CAACC,MAAM,CAACF,QAAQ;MAC1CG,MAAM,EAAGF,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC;MACnCC,OAAO,EAAGJ,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC;IACrC,CAAE;IAAApB,QAAA,GAEFR,KAAA,CAAAmB,IAAA;MACEC,SAAS,EAAC,KAAK;MACfG,EAAE,EAAE;QACFO,cAAc,EAAGL,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC;MAC5C,CAAE;MAAApB,QAAA,GAEDU,KAAK,IAAIpB,IAAA,CAACJ,QAAQ;QAAC0B,SAAS,EAAC,IAAI;QAAAZ,QAAA,EAAEU;MAAK,CAAW,CAAC,EACpDT,WAAW,IAAIX,IAAA,CAACH,OAAO;QAAAa,QAAA,EAAEC;MAAW,CAAU,CAAC,EAC/CH,KAAK;IAAA,CACH,CAAC,EACNR,IAAA,CAAAqB,IAAA;MAAKC,SAAS,EAAC,KAAK;MAAAZ,QAAA,EAAEA;IAAQ,CAAM,CAAC,EACpCG,WAAW,IACVb,IAAA,CAAAqB,IAAA;MACEC,SAAS,EAAC,KAAK;MACfG,EAAE,EAAE;QACFQ,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE,YAAY;QAC5BC,GAAG,EAAGR,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC;QAChCM,gBAAgB,EAAGT,KAAK,IAAKA,KAAK,CAACG,OAAO,CAAC,CAAC;MAC9C,CAAE;MAAApB,QAAA,EAEDG;IAAW,CACT,CACN;EAAA,CACE,CAAC;AAEV,CAAC;AAED,MAAMwB,YAAY,GAAG1C,IAAI,CAACW,IAAI,CAAC;AAC/B+B,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAI/B,IAAI"}