@okta/odyssey-react-mui 0.23.0 → 1.0.0

package/dist/Checkbox.js

@@ -1,39 +1,78 @@
+import _FormControlLabel from "@mui/material/FormControlLabel";
 import _Checkbox from "@mui/material/Checkbox";
-import { memo } from "react";
-import { FormControlLabel } from "./index.js";
+/*!
+ * 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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+import { Typography } from "./Typography.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-
+export const checkboxValidityValues = ["valid", "invalid", "inherit"];
 const Checkbox = _ref => {
   let {
     ariaLabel,
     ariaLabelledBy,
-    isChecked,
-    isDefaultChecked,
+    isDefaultChecked = false,
     isDisabled,
     isIndeterminate,
-    hasError,
-    label,
+    isRequired,
+    label: labelProp,
     name,
-    onChange,
+    onChange: onChangeProp,
+    validity = "inherit",
     value
   } = _ref;
-  return _jsx(FormControlLabel, {
+  const {
+    t
+  } = useTranslation();
+  const [isCheckedValue, setIsCheckedValue] = useState(isDefaultChecked);
+  const label = useMemo(() => {
+    if (isRequired) {
+      return _jsxs(_Fragment, {
+        children: [labelProp, " ", _jsxs(Typography, {
+          component: "span",
+          color: "textSecondary",
+          children: ["(", t("fieldlabel.required.text"), ")"]
+        })]
+      });
+    } else {
+      return _jsx(_Fragment, {
+        children: labelProp
+      });
+    }
+  }, [isRequired, labelProp, t]);
+  const onChange = useCallback((event, checked) => {
+    setIsCheckedValue(event.target.checked);
+    onChangeProp?.(event, checked);
+  }, [onChangeProp]);
+  return _jsx(_FormControlLabel, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    checked: isChecked,
-    className: hasError ? "Mui-error" : "",
+    checked: isCheckedValue,
+    className: validity === "invalid" ? "Mui-error" : validity === "valid" ? "Mui-valid" : "",
     control: _jsx(_Checkbox, {
-      indeterminate: isIndeterminate
+      indeterminate: isIndeterminate,
+      required: isRequired
     }),
-    defaultChecked: isDefaultChecked,
     disabled: isDisabled,
     label: label,
     name: name,
     onChange: onChange,
-    value: value
+    value: value,
+    required: isRequired
   });
 };
-
 const MemoizedCheckbox = memo(Checkbox);
+MemoizedCheckbox.displayName = "Checkbox";
 export { MemoizedCheckbox as Checkbox };
 //# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["memo","FormControlLabel","Checkbox","ariaLabel","ariaLabelledBy","isChecked","isDefaultChecked","isDisabled","isIndeterminate","hasError","label","name","onChange","value","MemoizedCheckbox"],"sources":["../src/Checkbox.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 { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { ChangeEventHandler, memo } from \"react\";\n\nimport { FormControlLabel } from \".\";\n\nexport type CheckboxProps = {\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  isChecked?: boolean;\n  isDefaultChecked?: boolean;\n  isDisabled?: boolean;\n  hasError?: boolean;\n  isIndeterminate?: boolean;\n  label?: string;\n  name?: string;\n  onChange?: ChangeEventHandler<EventTarget>;\n  value?: string;\n};\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  hasError,\n  label,\n  name,\n  onChange,\n  value,\n}: CheckboxProps) => (\n  <FormControlLabel\n    aria-label={ariaLabel}\n    aria-labelledby={ariaLabelledBy}\n    checked={isChecked}\n    className={hasError ? \"Mui-error\" : \"\"}\n    control={<MuiCheckbox indeterminate={isIndeterminate} />}\n    defaultChecked={isDefaultChecked}\n    disabled={isDisabled}\n    label={label}\n    name={name}\n    onChange={onChange}\n    value={value}\n  />\n);\n\nconst MemoizedCheckbox = memo(Checkbox);\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":";AAaA,SAA6BA,IAA7B,QAAyC,OAAzC;SAESC,gB;;;AAgBT,MAAMC,QAAQ,GAAG;EAAA,IAAC;IAChBC,SADgB;IAEhBC,cAFgB;IAGhBC,SAHgB;IAIhBC,gBAJgB;IAKhBC,UALgB;IAMhBC,eANgB;IAOhBC,QAPgB;IAQhBC,KARgB;IAShBC,IATgB;IAUhBC,QAVgB;IAWhBC;EAXgB,CAAD;EAAA,OAaf,KAAC,gBAAD;IACE,cAAYV,SADd;IAEE,mBAAiBC,cAFnB;IAGE,OAAO,EAAEC,SAHX;IAIE,SAAS,EAAEI,QAAQ,GAAG,WAAH,GAAiB,EAJtC;IAKE,OAAO,EAAE;MAAa,aAAa,EAAED;IAA5B,EALX;IAME,cAAc,EAAEF,gBANlB;IAOE,QAAQ,EAAEC,UAPZ;IAQE,KAAK,EAAEG,KART;IASE,IAAI,EAAEC,IATR;IAUE,QAAQ,EAAEC,QAVZ;IAWE,KAAK,EAAEC;EAXT,EAbe;AAAA,CAAjB;;AA4BA,MAAMC,gBAAgB,GAAGd,IAAI,CAACE,QAAD,CAA7B;AAEA,SAASY,gBAAgB,IAAIZ,QAA7B"}
+{"version":3,"file":"Checkbox.js","names":["Typography","memo","useCallback","useMemo","useState","useTranslation","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","name","onChange","onChangeProp","validity","value","t","isCheckedValue","setIsCheckedValue","children","component","color","event","checked","target","_FormControlLabel","className","control","_Checkbox","indeterminate","required","disabled","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.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 {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n} from \"@mui/material\";\nimport { Typography } from \"./Typography\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n  /**\n   * The ARIA label for the Checkbox\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Checkbox\n   */\n  ariaLabelledBy?: string;\n  /**\n   * Determines whether the Checkbox is checked\n   */\n  isDefaultChecked?: boolean;\n  /**\n   * Determines whether the Checkbox is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The name attribute of the Checkbox\n   */\n  name?: string;\n  /**\n   * The change event handler for the Checkbox\n   */\n  onChange?: MuiCheckboxProps[\"onChange\"];\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n};\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  isDefaultChecked = false,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  name,\n  onChange: onChangeProp,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const [isCheckedValue, setIsCheckedValue] = useState(isDefaultChecked);\n\n  const label = useMemo(() => {\n    if (isRequired) {\n      return (\n        <>\n          {labelProp}{\" \"}\n          <Typography component=\"span\" color=\"textSecondary\">\n            ({t(\"fieldlabel.required.text\")})\n          </Typography>\n        </>\n      );\n    } else {\n      return <>{labelProp}</>;\n    }\n  }, [isRequired, labelProp, t]);\n\n  const onChange = useCallback(\n    (event, checked) => {\n      setIsCheckedValue(event.target.checked);\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  return (\n    <FormControlLabel\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      checked={isCheckedValue}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n          ? \"Mui-valid\"\n          : \"\"\n      }\n      control={\n        <MuiCheckbox indeterminate={isIndeterminate} required={isRequired} />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      onChange={onChange}\n      value={value}\n      required={isRequired}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAiBSA,UAAU;AACnB,SAASC,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,sBAAsB,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU;AAiD9E,MAAMC,QAAQ,GAAGC,IAAA,IAYI;EAAA,IAZH;IAChBC,SAAS;IACTC,cAAc;IACdC,gBAAgB,GAAG,KAAK;IACxBC,UAAU;IACVC,eAAe;IACfC,UAAU;IACVC,KAAK,EAAEC,SAAS;IAChBC,IAAI;IACJC,QAAQ,EAAEC,YAAY;IACtBC,QAAQ,GAAG,SAAS;IACpBC;EACa,CAAC,GAAAb,IAAA;EACd,MAAM;IAAEc;EAAE,CAAC,GAAGvB,cAAc,CAAC,CAAC;EAC9B,MAAM,CAACwB,cAAc,EAAEC,iBAAiB,CAAC,GAAG1B,QAAQ,CAACa,gBAAgB,CAAC;EAEtE,MAAMI,KAAK,GAAGlB,OAAO,CAAC,MAAM;IAC1B,IAAIiB,UAAU,EAAE;MACd,OACEb,KAAA,CAAAE,SAAA;QAAAsB,QAAA,GACGT,SAAS,EAAE,GAAG,EACff,KAAA,CAACP,UAAU;UAACgC,SAAS,EAAC,MAAM;UAACC,KAAK,EAAC,eAAe;UAAAF,QAAA,GAAC,GAChD,EAACH,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;QAAA,CAAY,CAAC;MAAA,CACb,CAAC;IAEP,CAAC,MAAM;MACL,OAAOjB,IAAA,CAAAF,SAAA;QAAAsB,QAAA,EAAGT;MAAS,CAAG,CAAC;IACzB;EACF,CAAC,EAAE,CAACF,UAAU,EAAEE,SAAS,EAAEM,CAAC,CAAC,CAAC;EAE9B,MAAMJ,QAAQ,GAAGtB,WAAW,CAC1B,CAACgC,KAAK,EAAEC,OAAO,KAAK;IAClBL,iBAAiB,CAACI,KAAK,CAACE,MAAM,CAACD,OAAO,CAAC;IACvCV,YAAY,GAAGS,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACV,YAAY,CACf,CAAC;EAED,OACEd,IAAA,CAAA0B,iBAAA;IACE,cAAYtB,SAAU;IACtB,mBAAiBC,cAAe;IAChCmB,OAAO,EAAEN,cAAe;IACxBS,SAAS,EACPZ,QAAQ,KAAK,SAAS,GAClB,WAAW,GACXA,QAAQ,KAAK,OAAO,GACpB,WAAW,GACX,EACL;IACDa,OAAO,EACL5B,IAAA,CAAA6B,SAAA;MAAaC,aAAa,EAAEtB,eAAgB;MAACuB,QAAQ,EAAEtB;IAAW,CAAE,CACrE;IACDuB,QAAQ,EAAEzB,UAAW;IACrBG,KAAK,EAAEA,KAAM;IACbE,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBG,KAAK,EAAEA,KAAM;IACbe,QAAQ,EAAEtB;EAAW,CACtB,CAAC;AAEN,CAAC;AAED,MAAMwB,gBAAgB,GAAG3C,IAAI,CAACY,QAAQ,CAAC;AACvC+B,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAI/B,QAAQ"}

package/dist/CheckboxGroup.js

@@ -1,15 +1,26 @@
 import _FormGroup from "@mui/material/FormGroup";
+/*!
+ * 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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
 import { memo, useCallback } from "react";
 import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const CheckboxGroup = _ref => {
   let {
     children,
-    isDisabled,
     errorMessage,
     hint,
     id: idOverride,
+    isDisabled,
+    isRequired = false,
     label
   } = _ref;
   const renderFieldComponent = useCallback(_ref2 => {
@@ -26,15 +37,16 @@ const CheckboxGroup = _ref => {
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "group",
-    hasVisibleLabel: false,
+    hasVisibleLabel: true,
     hint: hint,
     id: idOverride,
     isDisabled: isDisabled,
+    isOptional: !isRequired,
     label: label,
     renderFieldComponent: renderFieldComponent
   });
 };
-
 const MemoizedCheckboxGroup = memo(CheckboxGroup);
+MemoizedCheckboxGroup.displayName = "CheckboxGroup";
 export { MemoizedCheckboxGroup as CheckboxGroup };
 //# sourceMappingURL=CheckboxGroup.js.map

package/dist/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","CheckboxGroup","children","isDisabled","errorMessage","hint","id","idOverride","label","renderFieldComponent","ariaDescribedBy","MemoizedCheckboxGroup"],"sources":["../src/CheckboxGroup.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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\n\nexport type CheckboxGroupProps = {\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  errorMessage?: string;\n  hint?: string;\n  /**\n   * The id of the `input` element. This will also be the input's `name` field.\n   */\n  id?: string;\n  isDisabled?: boolean;\n  label: string;\n};\n\nconst CheckboxGroup = ({\n  children,\n  isDisabled,\n  errorMessage,\n  hint,\n  id: idOverride,\n  label,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiFormGroup aria-describedby={ariaDescribedBy} id={id}>\n        {children}\n      </MuiFormGroup>\n    ),\n    [children]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAaA,SAASA,IAAT,EAA6BC,WAA7B,QAAgD,OAAhD;SAGSC,K;;;AAgBT,MAAMC,aAAa,GAAG,QAOI;EAAA,IAPH;IACrBC,QADqB;IAErBC,UAFqB;IAGrBC,YAHqB;IAIrBC,IAJqB;IAKrBC,EAAE,EAAEC,UALiB;IAMrBC;EANqB,CAOG;EACxB,MAAMC,oBAAoB,GAAGV,WAAW,CACtC;IAAA,IAAC;MAAEW,eAAF;MAAmBJ;IAAnB,CAAD;IAAA,OACE;MAAc,oBAAkBI,eAAhC;MAAiD,EAAE,EAAEJ,EAArD;MAAA,UACGJ;IADH,EADF;EAAA,CADsC,EAMtC,CAACA,QAAD,CANsC,CAAxC;EASA,OACE,KAAC,KAAD;IACE,YAAY,EAAEE,YADhB;IAEE,SAAS,EAAC,OAFZ;IAGE,eAAe,EAAE,KAHnB;IAIE,IAAI,EAAEC,IAJR;IAKE,EAAE,EAAEE,UALN;IAME,UAAU,EAAEJ,UANd;IAOE,KAAK,EAAEK,KAPT;IAQE,oBAAoB,EAAEC;EARxB,EADF;AAYD,CA7BD;;AA+BA,MAAME,qBAAqB,GAAGb,IAAI,CAACG,aAAD,CAAlC;AAEA,SAASU,qBAAqB,IAAIV,aAAlC"}
+{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","jsx","_jsx","CheckboxGroup","_ref","children","errorMessage","hint","id","idOverride","isDisabled","isRequired","label","renderFieldComponent","_ref2","ariaDescribedBy","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../src/CheckboxGroup.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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  /**\n   * The error message for the CheckboxGroup\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the CheckboxGroup\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element. This will also be the input's `name` field.\n   */\n  id?: string;\n  /**\n   * If `true`, the CheckboxGroup is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n};\n\nconst CheckboxGroup = ({\n  children,\n  errorMessage,\n  hint,\n  id: idOverride,\n  isDisabled,\n  isRequired = false,\n  label,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiFormGroup aria-describedby={ariaDescribedBy} id={id}>\n        {children}\n      </MuiFormGroup>\n    ),\n    [children]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAG/CC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmCd,MAAMC,aAAa,GAAGC,IAAA,IAQI;EAAA,IARH;IACrBC,QAAQ;IACRC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,UAAU,GAAG,KAAK;IAClBC;EACkB,CAAC,GAAAR,IAAA;EACnB,MAAMS,oBAAoB,GAAGd,WAAW,CACtCe,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEP;IAAG,CAAC,GAAAM,KAAA;IAAA,OACtBZ,IAAA,CAAAc,UAAA;MAAc,oBAAkBD,eAAgB;MAACP,EAAE,EAAEA,EAAG;MAAAH,QAAA,EACrDA;IAAQ,CACG,CAAC;EAAA,CAChB,EACD,CAACA,QAAQ,CACX,CAAC;EAED,OACEH,IAAA,CAACF,KAAK;IACJM,YAAY,EAAEA,YAAa;IAC3BW,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBX,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBS,UAAU,EAAE,CAACR,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbC,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,qBAAqB,GAAGtB,IAAI,CAACK,aAAa,CAAC;AACjDiB,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIjB,aAAa"}

package/dist/CircularProgress.js

@@ -1,12 +1,25 @@
 import _CircularProgress from "@mui/material/CircularProgress";
+/*!
+ * 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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const CircularProgress = _ref => {
   let {
+    ariaLabel,
     value
   } = _ref;
   return _jsx(_CircularProgress, {
     value: value,
-    variant: value ? "determinate" : "indeterminate"
+    variant: value ? "determinate" : "indeterminate",
+    "aria-label": ariaLabel
   });
 };
 //# sourceMappingURL=CircularProgress.js.map

package/dist/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","names":["CircularProgress","value"],"sources":["../src/CircularProgress.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 { CircularProgress as MuiCircularProgress } from \"@mui/material\";\n\nexport type CircularProgressProps = {\n  value?: number;\n};\n\nexport const CircularProgress = ({ value }: CircularProgressProps) => (\n  <MuiCircularProgress\n    value={value}\n    variant={value ? \"determinate\" : \"indeterminate\"}\n  />\n);\n"],"mappings":";;AAkBA,OAAO,MAAMA,gBAAgB,GAAG;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAC9B;IACE,KAAK,EAAEA,KADT;IAEE,OAAO,EAAEA,KAAK,GAAG,aAAH,GAAmB;EAFnC,EAD8B;AAAA,CAAzB"}
+{"version":3,"file":"CircularProgress.js","names":["jsx","_jsx","CircularProgress","_ref","ariaLabel","value","_CircularProgress","variant"],"sources":["../src/CircularProgress.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 { CircularProgress as MuiCircularProgress } from \"@mui/material\";\n\nexport type CircularProgressProps = {\n  /**\n   * The ARIA label for the progress spinner\n   */\n  ariaLabel?: string;\n  /**\n   * The percentage filled the spinner should be, as an integer.\n   * If undefined, the spinner will spin perpetually.\n   */\n  value?: number;\n};\n\nexport const CircularProgress = ({\n  ariaLabel,\n  value,\n}: CircularProgressProps) => (\n  <MuiCircularProgress\n    value={value}\n    variant={value ? \"determinate\" : \"indeterminate\"}\n    aria-label={ariaLabel}\n  />\n);\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAAAA,GAAA,IAAAC,IAAA;AA0BA,OAAO,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAC/BC,SAAS;IACTC;EACqB,CAAC,GAAAF,IAAA;EAAA,OACtBF,IAAA,CAAAK,iBAAA;IACED,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEF,KAAK,GAAG,aAAa,GAAG,eAAgB;IACjD,cAAYD;EAAU,CACvB,CAAC;AAAA,CACH"}

package/dist/Dialog.js

@@ -3,40 +3,47 @@ import _DialogActions from "@mui/material/DialogActions";
 import _DialogContent from "@mui/material/DialogContent";
 import _DialogTitle from "@mui/material/DialogTitle";
 import _DialogContentText from "@mui/material/DialogContentText";
-import { Button, CloseIcon } from "./index.js";
+/*!
+ * 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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+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);
   useEffect(() => {
     let frameId;
-
     const handleContentScroll = () => {
       const dialogContentElement = dialogContentRef.current;
-
       if (dialogContentElement) {
         setIsContentScrollable(dialogContentElement.scrollHeight > dialogContentElement.clientHeight);
       }
-
       frameId = requestAnimationFrame(handleContentScroll);
     };
-
     if (isOpen) {
       frameId = requestAnimationFrame(handleContentScroll);
     }
-
     return () => {
       cancelAnimationFrame(frameId);
     };
@@ -49,20 +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","Dialog","callToActionPrimaryComponent","callToActionSecondaryComponent","callToActionTertiaryComponent","children","isOpen","onClose","title","isContentScrollable","setIsContentScrollable","dialogContentRef","frameId","handleContentScroll","dialogContentElement","current","scrollHeight","clientHeight","requestAnimationFrame","cancelAnimationFrame","content","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":";;;;;SAmBSA,M,EAAQC,S;AACjB,SACEC,IADF,EAGEC,QAHF,EAIEC,SAJF,EAKEC,MALF,QAOO,OAPP;;;;AAmBA,MAAMC,MAAM,GAAG,QAQI;EAAA,IARH;IACdC,4BADc;IAEdC,8BAFc;IAGdC,6BAHc;IAIdC,QAJc;IAKdC,MALc;IAMdC,OANc;IAOdC;EAPc,CAQG;EACjB,MAAM,CAACC,mBAAD,EAAsBC,sBAAtB,IAAgDZ,QAAQ,CAAC,KAAD,CAA9D;EACA,MAAMa,gBAAgB,GAAGX,MAAM,CAAiB,IAAjB,CAA/B;EAEAD,SAAS,CAAC,MAAM;IACd,IAAIa,OAAJ;;IAEA,MAAMC,mBAAmB,GAAG,MAAM;MAChC,MAAMC,oBAAoB,GAAGH,gBAAgB,CAACI,OAA9C;;MACA,IAAID,oBAAJ,EAA0B;QACxBJ,sBAAsB,CACpBI,oBAAoB,CAACE,YAArB,GAAoCF,oBAAoB,CAACG,YADrC,CAAtB;MAGD;;MACDL,OAAO,GAAGM,qBAAqB,CAACL,mBAAD,CAA/B;IACD,CARD;;IAUA,IAAIP,MAAJ,EAAY;MACVM,OAAO,GAAGM,qBAAqB,CAACL,mBAAD,CAA/B;IACD;;IAED,OAAO,MAAM;MACXM,oBAAoB,CAACP,OAAD,CAApB;IACD,CAFD;EAGD,CApBQ,EAoBN,CAACN,MAAD,CApBM,CAAT;EAsBA,MAAMc,OAAO,GACX,OAAOf,QAAP,KAAoB,QAApB,GACE;IAAA,UAAoBA;EAApB,EADF,GAGEA,QAJJ;EAOA,OACE;IAAW,IAAI,EAAEC,MAAjB;IAAyB,OAAO,EAAEC,OAAlC;IAAA,WACE;MAAA,WACGC,KADH,EAEE,KAAC,MAAD;QACE,OAAO,EAAC,UADV;QAEE,OAAO,EAAED,OAFX;QAGE,SAAS,EAAE,KAAC,SAAD;MAHb,EAFF;IAAA,EADF,EASE;MAAe,QAAQ,EAAEE,mBAAzB;MAA8C,GAAG,EAAEE,gBAAnD;MAAA,UACGS;IADH,EATF,EAaG,CAAClB,4BAA4B,IAC5BC,8BADA,IAEAC,6BAFD,KAGC;MAAA,WACGA,6BADH,EAEGD,8BAFH,EAGGD,4BAHH;IAAA,EAhBJ;EAAA,EADF;AAyBD,CAlED;;AAoEA,MAAMmB,cAAc,GAAGxB,IAAI,CAACI,MAAD,CAA3B;AAEA,SAASoB,cAAc,IAAIpB,MAA3B"}
+{"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";
-
 /*!
  * 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.")
@@ -12,14 +11,18 @@ import _FormLabel from "@mui/material/FormLabel";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+
 import { memo, useMemo } from "react";
 import { FieldError } from "./FieldError.js";
 import { FieldHint } from "./FieldHint.js";
 import { FieldLabel } from "./FieldLabel.js";
+import { Typography } from "./Typography.js";
+import { useFieldset } from "./FieldsetContext.js";
+import { useTranslation } from "react-i18next";
 import { useUniqueId } from "./useUniqueId.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 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,
@@ -27,32 +30,41 @@ const Field = _ref => {
     hasVisibleLabel,
     hint,
     id: idOverride,
-    isDisabled = false,
+    isDisabled: isDisabledProp = false,
     isRadioGroup = false,
     isOptional = false,
     label,
-    optionalLabel,
     renderFieldComponent
   } = _ref;
+  const {
+    t
+  } = useTranslation();
   const id = useUniqueId(idOverride);
   const hintId = hint ? `${id}-hint` : undefined;
   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,
     error: Boolean(errorMessage),
     role: isRadioGroup ? "radiogroup" : undefined,
-    children: [fieldType === "group" ? _jsx(_FormLabel, {
+    children: [fieldType === "group" ? _jsxs(_FormLabel, {
       component: "legend",
-      children: label
+      children: [label, " ", isOptional && label && _jsxs(Typography, {
+        component: "span",
+        color: "textSecondary",
+        children: ["(", t("fieldlabel.optional.text"), ")"]
+      })]
     }) : _jsx(FieldLabel, {
       hasVisibleLabel: hasVisibleLabel,
       id: labelId,
       inputId: id,
       isOptional: isOptional,
-      optionalText: optionalLabel,
       text: label
     }), hint && _jsx(FieldHint, {
       id: hintId,
@@ -66,7 +78,7 @@ 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","Field","errorMessage","fieldType","hasVisibleLabel","hint","id","idOverride","isDisabled","isRadioGroup","isOptional","label","optionalLabel","renderFieldComponent","hintId","undefined","errorId","labelId","ariaDescribedBy","join","trim","Boolean","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} from \"@mui/material\";\nimport { FieldError } from \"./FieldError\";\nimport { FieldHint } from \"./FieldHint\";\nimport { FieldLabel } from \"./FieldLabel\";\nimport { useUniqueId } from \"./useUniqueId\";\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   * 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 label for the `input` element if the it's not optional\n   */\n  optionalLabel?: 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  optionalLabel,\n  renderFieldComponent,\n}: FieldProps) => {\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\">{label}</MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelId}\n          inputId={id}\n          isOptional={isOptional}\n          optionalText={optionalLabel}\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,IAAT,EAA6BC,OAA7B,QAA4C,OAA5C;SAMSC,U;SACAC,S;SACAC,U;SACAC,W;;;;AAwDT,MAAMC,KAAK,GAAG,QAYI;EAAA,IAZH;IACbC,YADa;IAEbC,SAFa;IAGbC,eAHa;IAIbC,IAJa;IAKbC,EAAE,EAAEC,UALS;IAMbC,UAAU,GAAG,KANA;IAObC,YAAY,GAAG,KAPF;IAQbC,UAAU,GAAG,KARA;IASbC,KATa;IAUbC,aAVa;IAWbC;EAXa,CAYG;EAChB,MAAMP,EAAE,GAAGN,WAAW,CAACO,UAAD,CAAtB;EACA,MAAMO,MAAM,GAAGT,IAAI,GAAI,GAAEC,EAAG,OAAT,GAAkBS,SAArC;EACA,MAAMC,OAAO,GAAGd,YAAY,GAAI,GAAEI,EAAG,QAAT,GAAmBS,SAA/C;EACA,MAAME,OAAO,GAAI,GAAEX,EAAG,QAAtB;EAEA,MAAMY,eAAe,GAAGtB,OAAO,CAC7B,MAAM,CAACkB,MAAD,EAASE,OAAT,EAAkBG,IAAlB,CAAuB,GAAvB,EAA4BC,IAA5B,MAAsCL,SADf,EAE7B,CAACC,OAAD,EAAUF,MAAV,CAF6B,CAA/B;EAKA,OACE;IACE,SAAS,EAAEX,SAAS,KAAK,OAAd,GAAwB,UAAxB,GAAqC,KADlD;IAEE,QAAQ,EAAEK,UAFZ;IAGE,KAAK,EAAEa,OAAO,CAACnB,YAAD,CAHhB;IAIE,IAAI,EAAEO,YAAY,GAAG,YAAH,GAAkBM,SAJtC;IAAA,WAMGZ,SAAS,KAAK,OAAd,GACC;MAAc,SAAS,EAAC,QAAxB;MAAA,UAAkCQ;IAAlC,EADD,GAGC,KAAC,UAAD;MACE,eAAe,EAAEP,eADnB;MAEE,EAAE,EAAEa,OAFN;MAGE,OAAO,EAAEX,EAHX;MAIE,UAAU,EAAEI,UAJd;MAKE,YAAY,EAAEE,aALhB;MAME,IAAI,EAAED;IANR,EATJ,EAmBGN,IAAI,IAAI,KAAC,SAAD;MAAW,EAAE,EAAES,MAAf;MAAuB,IAAI,EAAET;IAA7B,EAnBX,EAqBGQ,oBAAoB,CAAC;MACpBK,eADoB;MAEpBZ;IAFoB,CAAD,CArBvB,EA0BGJ,YAAY,IAAI,KAAC,UAAD;MAAY,EAAE,EAAEc,OAAhB;MAAyB,IAAI,EAAEd;IAA/B,EA1BnB;EAAA,EADF;AA8BD,CArDD;;AAuDA,MAAMoB,aAAa,GAAG3B,IAAI,CAACM,KAAD,CAA1B;AAEA,SAASqB,aAAa,IAAIrB,KAA1B"}
+{"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.")
@@ -9,26 +10,29 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+
 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";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const FieldError = _ref => {
   let {
     id,
     text
   } = _ref;
-  return _jsxs(FormHelperText, {
+  const {
+    t
+  } = useTranslation();
+  return _jsxs(_FormHelperText, {
     error: true,
     id: id,
     children: [_jsx(ScreenReaderText, {
-      children: "Error:"
+      children: `${t("fielderror.screenreader.text")}:`
     }), text]
   });
 };
-
 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","FieldError","id","text","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\";\n\nexport type FieldErrorProps = {\n  id?: string;\n  text: string;\n};\n\nconst FieldError = ({ id, text }: FieldErrorProps) => {\n  return (\n    <FormHelperText error id={id}>\n      <ScreenReaderText>Error:</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,IAAT,QAAqB,OAArB;SAESC,c;SACAC,gB;;;;AAOT,MAAMC,UAAU,GAAG,QAAmC;EAAA,IAAlC;IAAEC,EAAF;IAAMC;EAAN,CAAkC;EACpD,OACE,MAAC,cAAD;IAAgB,KAAK,MAArB;IAAsB,EAAE,EAAED,EAA1B;IAAA,WACE,KAAC,gBAAD;MAAA;IAAA,EADF,EAEGC,IAFH;EAAA,EADF;AAMD,CAPD;;AASA,MAAMC,kBAAkB,GAAGN,IAAI,CAACG,UAAD,CAA/B;AAEA,SAASG,kBAAkB,IAAIH,UAA/B"}
+{"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.")
@@ -9,21 +10,20 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+
 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","FieldHint","id","text","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,IAAT,QAAqB,OAArB;SAESC,c;;;AAOT,MAAMC,SAAS,GAAG,QAAkC;EAAA,IAAjC;IAAEC,EAAF;IAAMC;EAAN,CAAiC;EAClD,OAAO,KAAC,cAAD;IAAgB,EAAE,EAAED,EAApB;IAAA,UAAyBC;EAAzB,EAAP;AACD,CAFD;;AAIA,MAAMC,iBAAiB,GAAGL,IAAI,CAACE,SAAD,CAA9B;AAEA,SAASG,iBAAiB,IAAIH,SAA9B"}
+{"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"}