@okta/odyssey-contribution-tooling 1.52.0 → 1.53.0

package/dist/esm/FileUploader/FileUploader.js

@@ -0,0 +1,196 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "../Buttons/Button.js";
+import { Field } from "../Field.js";
+import { useTranslation } from "../i18n.generated/i18n.js";
+import { UploadIcon } from "../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { Support } from "../Typography.js";
+import { FileUploadIllustration } from "./FileUploadIllustration.js";
+import { FileUploadPreview } from "./FileUploadPreview.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const fileUploadTypes = ["single", "multiple"];
+export const fileUploadVariants = ["button", "dragAndDrop", "dragAndDropWithIcon"];
+const BaseInputWrapper = styled.div({
+  position: "relative",
+  alignSelf: "flex-start",
+  input: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    opacity: 0
+  }
+});
+const InputContainer = styled(BaseInputWrapper)({
+  display: "flex",
+  alignSelf: "unset",
+  alignItems: "center",
+  justifyContent: "center",
+  "&:has(input:focus)": {
+    borderStyle: "solid"
+  }
+}, ({
+  hasError,
+  odysseyDesignTokens
+}) => ({
+  padding: `${odysseyDesignTokens.Spacing6} ${odysseyDesignTokens.Spacing3}`,
+  border: hasError ? `1px solid ${odysseyDesignTokens.PaletteDangerMain}` : `1px dashed ${odysseyDesignTokens.HueNeutral300}`,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `border-color ${odysseyDesignTokens.TransitionTimingMain}, box-shadow ${odysseyDesignTokens.TransitionTimingMain}`,
+  "&:hover": {
+    borderColor: odysseyDesignTokens.HueNeutral700
+  },
+  "&:has(input:focus)": {
+    borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+    boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,
+    outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,
+    outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight
+  },
+  "&:has(input:disabled)": {
+    backgroundColor: odysseyDesignTokens.HueNeutral50,
+    border: `1px solid ${odysseyDesignTokens.BorderColorDisabled}`,
+    color: odysseyDesignTokens.TypographyColorDisabled,
+    "&:hover": {
+      borderColor: odysseyDesignTokens.BorderColorDisabled
+    }
+  }
+}));
+const ButtonAndInfoContainer = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const CenterAlignedSupportText = styled.div({
+  textAlign: "center"
+});
+const FileUploader = ({
+  acceptedFileTypes,
+  errorMessage,
+  id,
+  isDisabled = false,
+  isFullWidth,
+  isOptional,
+  hint,
+  HintLinkComponent,
+  label,
+  onChange,
+  type,
+  variant
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const inputRef = useRef(null);
+  const [filesToUpload, setFilesToUpload] = useState([]);
+  useEffect(() => {
+    onChange(filesToUpload);
+  }, [filesToUpload, onChange]);
+  const updateFilesToUpload = useCallback(event => {
+    const {
+      files
+    } = event.target;
+    if (files && files.length > 0) {
+      const mergedFiles = type === "multiple" ? filesToUpload.concat(Array.from(files)) : Array.from(files).slice();
+      setFilesToUpload(mergedFiles);
+    }
+    event.target.value = "";
+  }, [type, filesToUpload]);
+  const triggerFileInputClick = useCallback(() => {
+    inputRef.current?.click();
+  }, [inputRef]);
+  const removeFileFromFilesToUploadList = useCallback(name => {
+    const deletedFileFilteredOut = filesToUpload.filter(file => file.name !== name);
+    setFilesToUpload(deletedFileFilteredOut);
+  }, [filesToUpload]);
+  const renderFileInput = useCallback(({
+    ariaDescribedBy,
+    errorMessageElementId,
+    id,
+    labelElementId
+  }) => {
+    const acceptedFileTypesAsString = acceptedFileTypes?.join(",");
+    const Input = () => _jsx("input", {
+      accept: acceptedFileTypesAsString,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": errorMessageElementId,
+      "aria-labelledby": labelElementId,
+      disabled: isDisabled,
+      id: id,
+      multiple: type === "multiple",
+      onChange: updateFilesToUpload,
+      ref: inputRef,
+      title: "",
+      type: "file"
+    });
+    if (variant === "button") {
+      return _jsx(_Fragment, {
+        children: _jsxs(BaseInputWrapper, {
+          children: [_jsx(Input, {}), _jsx(Button, {
+            isDisabled: isDisabled,
+            label: t("fileupload.button.text"),
+            onClick: triggerFileInputClick,
+            startIcon: _jsx(UploadIcon, {}),
+            variant: "secondary"
+          })]
+        })
+      });
+    }
+    return _jsx(_Fragment, {
+      children: _jsxs(InputContainer, {
+        hasError: Boolean(errorMessage),
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [_jsx(Input, {}), _jsxs(ButtonAndInfoContainer, {
+          children: [variant === "dragAndDropWithIcon" && _jsx(FileUploadIllustration, {}), _jsx(CenterAlignedSupportText, {
+            children: _jsx(Support, {
+              color: "textSecondary",
+              children: t("fileupload.prompt.text")
+            })
+          }), _jsx(Button, {
+            isDisabled: isDisabled,
+            label: t("fileupload.button.text"),
+            onClick: triggerFileInputClick,
+            startIcon: _jsx(UploadIcon, {}),
+            variant: "secondary"
+          })]
+        })]
+      })
+    });
+  }, [acceptedFileTypes, errorMessage, isDisabled, inputRef, odysseyDesignTokens, triggerFileInputClick, t, type, updateFilesToUpload, variant]);
+  return _jsxs(_Fragment, {
+    children: [_jsx(Field, {
+      errorMessage: errorMessage,
+      fieldType: "single",
+      hasVisibleLabel: true,
+      hint: hint,
+      HintLinkComponent: HintLinkComponent,
+      id: id,
+      isDisabled: isDisabled,
+      isFullWidth: isFullWidth && variant !== "button",
+      isOptional: isOptional,
+      label: label,
+      renderFieldComponent: renderFileInput
+    }), filesToUpload.length > 0 && _jsx(FileUploadPreview, {
+      fileNames: filesToUpload.map(file => file.name),
+      isDisabled: isDisabled,
+      onFileRemove: removeFileFromFilesToUploadList
+    })]
+  });
+};
+const MemoizedFileUploader = memo(FileUploader);
+MemoizedFileUploader.displayName = "FileUploader";
+export { MemoizedFileUploader as FileUpload, MemoizedFileUploader as FileUploader };
+//# sourceMappingURL=FileUploader.js.map

package/dist/esm/FileUploader/FileUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.js","names":["styled","memo","useCallback","useEffect","useRef","useState","Button","Field","useTranslation","UploadIcon","useOdysseyDesignTokens","Support","FileUploadIllustration","FileUploadPreview","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","fileUploadTypes","fileUploadVariants","BaseInputWrapper","div","position","alignSelf","input","width","height","opacity","InputContainer","display","alignItems","justifyContent","borderStyle","hasError","odysseyDesignTokens","padding","Spacing6","Spacing3","border","PaletteDangerMain","HueNeutral300","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","borderColor","HueNeutral700","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","outlineOffset","FocusOutlineOffsetTight","backgroundColor","HueNeutral50","BorderColorDisabled","color","TypographyColorDisabled","ButtonAndInfoContainer","flexDirection","CenterAlignedSupportText","textAlign","FileUploader","acceptedFileTypes","errorMessage","id","isDisabled","isFullWidth","isOptional","hint","HintLinkComponent","label","onChange","type","variant","t","inputRef","filesToUpload","setFilesToUpload","updateFilesToUpload","event","files","target","length","mergedFiles","concat","Array","from","slice","value","triggerFileInputClick","current","click","removeFileFromFilesToUploadList","name","deletedFileFilteredOut","filter","file","renderFileInput","ariaDescribedBy","errorMessageElementId","labelElementId","acceptedFileTypesAsString","join","Input","accept","disabled","multiple","ref","title","children","onClick","startIcon","Boolean","fieldType","hasVisibleLabel","renderFieldComponent","fileNames","map","onFileRemove","MemoizedFileUploader","displayName","FileUpload"],"sources":["../../../src/FileUploader/FileUploader.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 styled from \"@emotion/styled\";\nimport {\n  ChangeEvent,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button } from \"../Buttons/Button.js\";\nimport { Field, RenderFieldComponentProps } from \"../Field.js\";\nimport { FieldComponentProps } from \"../FieldComponentProps.js\";\nimport { useTranslation } from \"../i18n.generated/i18n.js\";\nimport { UploadIcon } from \"../icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { Support } from \"../Typography.js\";\nimport { FileUploadIllustration } from \"./FileUploadIllustration.js\";\nimport { FileUploadPreview } from \"./FileUploadPreview.js\";\n\nexport const fileUploadTypes = [\"single\", \"multiple\"] as const;\nexport const fileUploadVariants = [\n  \"button\",\n  \"dragAndDrop\",\n  \"dragAndDropWithIcon\",\n] as const;\n\nconst BaseInputWrapper = styled.div({\n  position: \"relative\",\n  alignSelf: \"flex-start\",\n\n  input: {\n    position: \"absolute\",\n    width: \"100%\",\n    height: \"100%\",\n    opacity: 0,\n  },\n});\n\nconst InputContainer = styled(BaseInputWrapper)<{\n  hasError: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(\n  {\n    display: \"flex\",\n    alignSelf: \"unset\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    \"&:has(input:focus)\": {\n      borderStyle: \"solid\",\n    },\n  },\n  ({ hasError, odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing6} ${odysseyDesignTokens.Spacing3}`,\n    border: hasError\n      ? `1px solid ${odysseyDesignTokens.PaletteDangerMain}`\n      : `1px dashed ${odysseyDesignTokens.HueNeutral300}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `border-color ${odysseyDesignTokens.TransitionTimingMain}, box-shadow ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover\": {\n      borderColor: odysseyDesignTokens.HueNeutral700,\n    },\n\n    \"&:has(input:focus)\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n      outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,\n    },\n\n    \"&:has(input:disabled)\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral50,\n      border: `1px solid ${odysseyDesignTokens.BorderColorDisabled}`,\n      color: odysseyDesignTokens.TypographyColorDisabled,\n\n      \"&:hover\": {\n        borderColor: odysseyDesignTokens.BorderColorDisabled,\n      },\n    },\n  }),\n);\n\nconst ButtonAndInfoContainer = styled.div({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n});\n\nconst CenterAlignedSupportText = styled.div({\n  textAlign: \"center\",\n});\n\nexport type FileUploaderProps = {\n  /**\n   * an array of file types the user is able to upload. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers for examples\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Function that is called when the list of ifles to upload is changed\n   */\n  onChange: (files: File[]) => void;\n  /**\n   * Either `single` or `multiple`. If `multiple`, multiple files can be uploaded\n   */\n  type?: (typeof fileUploadTypes)[number];\n  /**\n   * Either `button`, `dragAndDrop` or `dragAndDropWithIcon`. Will determine how component appears visually\n   */\n  variant: (typeof fileUploadVariants)[number];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n>;\n\nconst FileUploader = ({\n  acceptedFileTypes,\n  errorMessage,\n  id,\n  isDisabled = false,\n  isFullWidth,\n  isOptional,\n  hint,\n  HintLinkComponent,\n  label,\n  onChange,\n  type,\n  variant,\n}: FileUploaderProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [filesToUpload, setFilesToUpload] = useState<File[]>([]);\n\n  useEffect(() => {\n    onChange(filesToUpload);\n  }, [filesToUpload, onChange]);\n\n  const updateFilesToUpload = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { files } = event.target;\n\n      if (files && files.length > 0) {\n        const mergedFiles =\n          type === \"multiple\"\n            ? filesToUpload.concat(Array.from(files))\n            : Array.from(files).slice();\n\n        setFilesToUpload(mergedFiles);\n      }\n\n      // reset input value to allow re-upload of a file with the same name\n      event.target.value = \"\";\n    },\n    [type, filesToUpload],\n  );\n\n  const triggerFileInputClick = useCallback(() => {\n    inputRef.current?.click();\n  }, [inputRef]);\n\n  const removeFileFromFilesToUploadList = useCallback<(name: string) => void>(\n    (name) => {\n      const deletedFileFilteredOut = filesToUpload.filter(\n        (file) => file.name !== name,\n      );\n      setFilesToUpload(deletedFileFilteredOut);\n    },\n    [filesToUpload],\n  );\n\n  const renderFileInput = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: RenderFieldComponentProps) => {\n      const acceptedFileTypesAsString = acceptedFileTypes?.join(\",\");\n\n      const Input = () => (\n        <input\n          accept={acceptedFileTypesAsString}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          aria-labelledby={labelElementId}\n          disabled={isDisabled}\n          id={id}\n          multiple={type === \"multiple\"}\n          onChange={updateFilesToUpload}\n          ref={inputRef}\n          title=\"\"\n          type=\"file\"\n        />\n      );\n\n      if (variant === \"button\") {\n        return (\n          <>\n            <BaseInputWrapper>\n              <Input />\n              <Button\n                isDisabled={isDisabled}\n                label={t(\"fileupload.button.text\")}\n                onClick={triggerFileInputClick}\n                startIcon={<UploadIcon />}\n                variant=\"secondary\"\n              />\n            </BaseInputWrapper>\n          </>\n        );\n      }\n\n      return (\n        <>\n          <InputContainer\n            hasError={Boolean(errorMessage)}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <Input />\n            <ButtonAndInfoContainer>\n              {variant === \"dragAndDropWithIcon\" && <FileUploadIllustration />}\n              <CenterAlignedSupportText>\n                <Support color=\"textSecondary\">\n                  {t(\"fileupload.prompt.text\")}\n                </Support>\n              </CenterAlignedSupportText>\n              <Button\n                isDisabled={isDisabled}\n                label={t(\"fileupload.button.text\")}\n                onClick={triggerFileInputClick}\n                startIcon={<UploadIcon />}\n                variant=\"secondary\"\n              />\n            </ButtonAndInfoContainer>\n          </InputContainer>\n        </>\n      );\n    },\n    [\n      acceptedFileTypes,\n      errorMessage,\n      isDisabled,\n      inputRef,\n      odysseyDesignTokens,\n      triggerFileInputClick,\n      t,\n      type,\n      updateFilesToUpload,\n      variant,\n    ],\n  );\n\n  return (\n    <>\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        id={id}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth && variant !== \"button\"}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFileInput}\n      />\n      {filesToUpload.length > 0 && (\n        <FileUploadPreview\n          fileNames={filesToUpload.map((file) => file.name)}\n          isDisabled={isDisabled}\n          onFileRemove={removeFileFromFilesToUploadList}\n        />\n      )}\n    </>\n  );\n};\n\nconst MemoizedFileUploader = memo(FileUploader);\nMemoizedFileUploader.displayName = \"FileUploader\";\n\nexport {\n  MemoizedFileUploader as FileUpload,\n  MemoizedFileUploader as FileUploader,\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Form.js

@@ -0,0 +1,97 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo } from "react";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { Heading4, Support } from "./Typography.js";
+import { useUniqueId } from "./useUniqueId.js";
+import { jsx as _jsx, 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 StyledForm = styled.form(({
+  isFullWidth,
+  odysseyDesignTokens
+}) => ({
+  maxWidth: isFullWidth ? "100%" : odysseyDesignTokens.TypographyLineLengthMax,
+  margin: 0,
+  padding: 0
+}));
+const TitleContainer = styled.div(({
+  odysseyDesignTokens
+}) => ({
+  marginBlockEnd: odysseyDesignTokens.Spacing4
+}));
+const FormActionContainer = styled.div({
+  display: "flex",
+  justifyContent: "flex-end"
+}, ({
+  odysseyDesignTokens
+}) => ({
+  gap: odysseyDesignTokens.Spacing1,
+  marginBlockStart: odysseyDesignTokens.Spacing7
+}));
+const Form = ({
+  alert,
+  autoCompleteType,
+  children,
+  description,
+  encodingType,
+  formActions,
+  id: idOverride,
+  isFullWidth,
+  method,
+  name,
+  noValidate = false,
+  onSubmit,
+  target,
+  testId,
+  title,
+  translate
+}) => {
+  const id = useUniqueId(idOverride);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(StyledForm, {
+    autoComplete: autoCompleteType,
+    "data-se": testId,
+    encType: encodingType,
+    id: id,
+    isFullWidth: isFullWidth,
+    method: method,
+    name: name,
+    noValidate: noValidate,
+    odysseyDesignTokens: odysseyDesignTokens,
+    onSubmit: onSubmit,
+    target: target,
+    children: [_jsxs(TitleContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [title && _jsx(Heading4, {
+        component: "h1",
+        translate: translate,
+        children: title
+      }), description && _jsx(Support, {
+        translate: translate,
+        children: description
+      }), alert]
+    }), _jsx("div", {
+      children: children
+    }), formActions && _jsx(FormActionContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: formActions
+    })]
+  });
+};
+const MemoizedForm = memo(Form);
+MemoizedForm.displayName = "Form";
+export { MemoizedForm as Form };
+//# sourceMappingURL=Form.js.map

package/dist/esm/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","names":["styled","memo","useOdysseyDesignTokens","Heading4","Support","useUniqueId","jsx","_jsx","jsxs","_jsxs","formEncodingTypeValues","formAutoCompleteTypeValues","formMethodValues","StyledForm","form","isFullWidth","odysseyDesignTokens","maxWidth","TypographyLineLengthMax","margin","padding","TitleContainer","div","marginBlockEnd","Spacing4","FormActionContainer","display","justifyContent","gap","Spacing1","marginBlockStart","Spacing7","Form","alert","autoCompleteType","children","description","encodingType","formActions","id","idOverride","method","name","noValidate","onSubmit","target","testId","title","translate","autoComplete","encType","component","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 styled from \"@emotion/styled\";\nimport { FormEventHandler, memo, ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button } from \"./Buttons/Button.js\";\nimport { Callout } from \"./Callout.js\";\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading4, Support } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\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\nconst StyledForm = styled.form<{\n  isFullWidth?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ isFullWidth, odysseyDesignTokens }) => ({\n  maxWidth: isFullWidth ? \"100%\" : odysseyDesignTokens.TypographyLineLengthMax,\n  margin: 0,\n  padding: 0,\n}));\n\nconst TitleContainer = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  marginBlockEnd: odysseyDesignTokens.Spacing4,\n}));\n\nconst FormActionContainer = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(\n  {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n  },\n  ({ odysseyDesignTokens }) => ({\n    gap: odysseyDesignTokens.Spacing1,\n    marginBlockStart: odysseyDesignTokens.Spacing7,\n  }),\n);\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   * Callback that passes the submit event to the consumer\n   */\n  onSubmit?: FormEventHandler<HTMLFormElement>;\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} & Pick<FieldComponentProps, \"isFullWidth\"> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Form = ({\n  alert,\n  autoCompleteType,\n  children,\n  description,\n  encodingType,\n  formActions,\n  id: idOverride,\n  isFullWidth,\n  method,\n  name,\n  noValidate = false,\n  onSubmit,\n  target,\n  testId,\n  title,\n  translate,\n}: FormProps) => {\n  const id = useUniqueId(idOverride);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <StyledForm\n      autoComplete={autoCompleteType}\n      data-se={testId}\n      encType={encodingType}\n      id={id}\n      isFullWidth={isFullWidth}\n      method={method}\n      name={name}\n      noValidate={noValidate}\n      odysseyDesignTokens={odysseyDesignTokens}\n      onSubmit={onSubmit}\n      target={target}\n    >\n      <TitleContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {title && (\n          <Heading4 component=\"h1\" translate={translate}>\n            {title}\n          </Heading4>\n        )}\n        {description && <Support translate={translate}>{description}</Support>}\n        {alert}\n      </TitleContainer>\n      <div>{children}</div>\n      {formActions && (\n        <FormActionContainer odysseyDesignTokens={odysseyDesignTokens}>\n          {formActions}\n        </FormActionContainer>\n      )}\n    </StyledForm>\n  );\n};\n\nconst MemoizedForm = memo(Form);\nMemoizedForm.displayName = \"Form\";\n\nexport { MemoizedForm as Form };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/FormCheckedProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FormCheckedProps.js.map

package/dist/esm/FormCheckedProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCheckedProps.js","names":[],"sources":["../../src/FormCheckedProps.ts"],"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 { SwitchBaseProps } from \"@mui/material/internal/SwitchBase.js\";\n\ntype SwitchOnChangeProp = Pick<SwitchBaseProps, \"onChange\">;\n\nexport type ControlledCheckedFieldProps<\n  TogglableInputElement extends SwitchOnChangeProp,\n> = {\n  /**\n   * Sets the checked state of the Checkbox\n   */\n  isChecked: boolean;\n  /**\n   * Determines whether the Checkbox is checked\n   * Should not be used if `isChecked` is used\n   */\n  isDefaultChecked?: never;\n  /**\n   * The change event handler for the Checkbox\n   * Must be used if `isChecked` is used\n   */\n  onChange: TogglableInputElement[\"onChange\"];\n};\n\nexport type UncontrolledCheckedFieldProps<\n  TogglableInputElement extends SwitchOnChangeProp,\n> = {\n  /**\n   * Sets the checked state of the Checkbox\n   */\n  isChecked?: never;\n  /**\n   * Determines whether the Checkbox is checked\n   * Should not be used if `isChecked` is used\n   */\n  isDefaultChecked?: boolean;\n  /**\n   * The change event handler for the Checkbox\n   * Must be used if `isChecked` is used\n   */\n  onChange?: TogglableInputElement[\"onChange\"];\n};\n\nexport type CheckedFieldProps<\n  TogglableInputElement extends SwitchOnChangeProp,\n> =\n  | ControlledCheckedFieldProps<TogglableInputElement>\n  | UncontrolledCheckedFieldProps<TogglableInputElement>;\n"],"mappings":"","ignoreList":[]}

package/dist/esm/FullScreenOverlay.js

@@ -0,0 +1,40 @@
+/*!
+ * Copyright (c) 2025-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 } from "react";
+import { useFullScreenOverlayContext } from "./FullScreenOverlayContext.js";
+import { OdysseyProvider } from "./OdysseyProvider.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const FullScreenOverlay = ({
+  children,
+  overlayType
+}) => {
+  const {
+    overlayEmotionRootElement,
+    overlayShadowRootElement
+  } = useFullScreenOverlayContext();
+  return overlayShadowRootElement ? _jsx(OdysseyProvider, {
+    emotionRootElement: overlayEmotionRootElement,
+    hasScopedCssBaseline: false,
+    hasTranslationProvider: false,
+    hasWrapperElement: false,
+    overlayType: overlayType,
+    shadowRootElement: overlayShadowRootElement,
+    children: children
+  }) : _jsx(_Fragment, {
+    children: children
+  });
+};
+const MemoizedFullScreenOverlay = memo(FullScreenOverlay);
+MemoizedFullScreenOverlay.displayName = "FullScreenOverlay";
+export { MemoizedFullScreenOverlay as FullScreenOverlay };
+//# sourceMappingURL=FullScreenOverlay.js.map

package/dist/esm/FullScreenOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenOverlay.js","names":["memo","useFullScreenOverlayContext","OdysseyProvider","jsx","_jsx","Fragment","_Fragment","FullScreenOverlay","children","overlayType","overlayEmotionRootElement","overlayShadowRootElement","emotionRootElement","hasScopedCssBaseline","hasTranslationProvider","hasWrapperElement","shadowRootElement","MemoizedFullScreenOverlay","displayName"],"sources":["../../src/FullScreenOverlay.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2025-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, type ReactNode } from \"react\";\n\nimport {\n  type OverlayType,\n  useFullScreenOverlayContext,\n} from \"./FullScreenOverlayContext.js\";\nimport { OdysseyProvider } from \"./OdysseyProvider.js\";\n\nexport type FullScreenOverlayProps = {\n  children: ReactNode;\n  overlayType?: OverlayType;\n};\n\nconst FullScreenOverlay = ({\n  children,\n  overlayType,\n}: FullScreenOverlayProps) => {\n  const { overlayEmotionRootElement, overlayShadowRootElement } =\n    useFullScreenOverlayContext();\n\n  return overlayShadowRootElement ? (\n    <OdysseyProvider\n      emotionRootElement={overlayEmotionRootElement}\n      hasScopedCssBaseline={false}\n      hasTranslationProvider={false}\n      hasWrapperElement={false}\n      overlayType={overlayType}\n      shadowRootElement={overlayShadowRootElement}\n    >\n      {children}\n    </OdysseyProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nconst MemoizedFullScreenOverlay = memo(FullScreenOverlay);\nMemoizedFullScreenOverlay.displayName = \"FullScreenOverlay\";\n\nexport { MemoizedFullScreenOverlay as FullScreenOverlay };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAwB,OAAO;AAE5C,SAEEC,2BAA2B,QACtB,+BAA+B;AACtC,SAASC,eAAe,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAOvD,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,QAAQ;EACRC;AACsB,CAAC,KAAK;EAC5B,MAAM;IAAEC,yBAAyB;IAAEC;EAAyB,CAAC,GAC3DV,2BAA2B,CAAC,CAAC;EAE/B,OAAOU,wBAAwB,GAC7BP,IAAA,CAACF,eAAe;IACdU,kBAAkB,EAAEF,yBAA0B;IAC9CG,oBAAoB,EAAE,KAAM;IAC5BC,sBAAsB,EAAE,KAAM;IAC9BC,iBAAiB,EAAE,KAAM;IACzBN,WAAW,EAAEA,WAAY;IACzBO,iBAAiB,EAAEL,wBAAyB;IAAAH,QAAA,EAE3CA;EAAQ,CACM,CAAC,GAElBJ,IAAA,CAAAE,SAAA;IAAAE,QAAA,EAAGA;EAAQ,CAAG,CACf;AACH,CAAC;AAED,MAAMS,yBAAyB,GAAGjB,IAAI,CAACO,iBAAiB,CAAC;AACzDU,yBAAyB,CAACC,WAAW,GAAG,mBAAmB;AAE3D,SAASD,yBAAyB,IAAIV,iBAAiB","ignoreList":[]}

package/dist/esm/FullScreenOverlayContext.js

@@ -0,0 +1,73 @@
+/*!
+ * Copyright (c) 2025-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 { createContext, memo, useContext, useEffect, useMemo } from "react";
+import { createShadowDomElements } from "./web-component/createShadowDomElements.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FullScreenOverlayContext = createContext({});
+export const useFullScreenOverlayContext = () => useContext(FullScreenOverlayContext);
+export const OVERLAY_DATA_ATTRIBUTES = {
+  dialog: "data-odyssey-react-dialog-overlay-component",
+  drawer: "data-odyssey-react-drawer-overlay-component",
+  default: "data-odyssey-react-overlay-component"
+};
+const FullScreenOverlayProvider = ({
+  children,
+  hasShadowDom,
+  overlayParentElement: overlayParentElementProp,
+  overlayType = "default"
+}) => {
+  const {
+    overlayEmotionRootElement,
+    overlayParentElement,
+    overlayShadowRootElement
+  } = useMemo(() => {
+    const overlayParentElement = overlayParentElementProp || document.createElement("div");
+    if (hasShadowDom) {
+      const {
+        emotionRootElement,
+        shadowRootElement
+      } = createShadowDomElements(overlayParentElement);
+      return {
+        overlayEmotionRootElement: emotionRootElement,
+        overlayParentElement,
+        overlayShadowRootElement: shadowRootElement
+      };
+    }
+    return {
+      overlayEmotionRootElement: undefined,
+      overlayParentElement,
+      overlayShadowRootElement: undefined
+    };
+  }, [hasShadowDom, overlayParentElementProp]);
+  useEffect(() => {
+    if (overlayParentElement) {
+      overlayParentElement.setAttribute(OVERLAY_DATA_ATTRIBUTES[overlayType], "");
+      document.body.append(overlayParentElement);
+    }
+    return () => {
+      overlayParentElement.remove();
+    };
+  }, [overlayParentElement, overlayType]);
+  const providerValue = useMemo(() => ({
+    overlayEmotionRootElement,
+    overlayShadowRootElement
+  }), [overlayEmotionRootElement, overlayShadowRootElement]);
+  return _jsx(FullScreenOverlayContext.Provider, {
+    value: providerValue,
+    children: children
+  });
+};
+const MemoizedFullScreenOverlayProvider = memo(FullScreenOverlayProvider);
+MemoizedFullScreenOverlayProvider.displayName = "FullScreenOverlayProvider";
+export { MemoizedFullScreenOverlayProvider as FullScreenOverlayProvider };
+//# sourceMappingURL=FullScreenOverlayContext.js.map

package/dist/esm/FullScreenOverlayContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenOverlayContext.js","names":["createContext","memo","useContext","useEffect","useMemo","createShadowDomElements","jsx","_jsx","FullScreenOverlayContext","useFullScreenOverlayContext","OVERLAY_DATA_ATTRIBUTES","dialog","drawer","default","FullScreenOverlayProvider","children","hasShadowDom","overlayParentElement","overlayParentElementProp","overlayType","overlayEmotionRootElement","overlayShadowRootElement","document","createElement","emotionRootElement","shadowRootElement","undefined","setAttribute","body","append","remove","providerValue","Provider","value","MemoizedFullScreenOverlayProvider","displayName"],"sources":["../../src/FullScreenOverlayContext.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2025-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  createContext,\n  memo,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from \"react\";\n\nimport { createShadowDomElements } from \"./web-component/createShadowDomElements.js\";\n\nexport type FullScreenOverlayContextType = {\n  overlayEmotionRootElement?: HTMLDivElement | HTMLElement;\n  overlayShadowRootElement?: HTMLDivElement | HTMLElement;\n};\n\nexport const FullScreenOverlayContext =\n  createContext<FullScreenOverlayContextType>({});\n\nexport const useFullScreenOverlayContext = () =>\n  useContext(FullScreenOverlayContext);\n\nexport const OVERLAY_DATA_ATTRIBUTES = {\n  dialog: \"data-odyssey-react-dialog-overlay-component\",\n  drawer: \"data-odyssey-react-drawer-overlay-component\",\n  default: \"data-odyssey-react-overlay-component\",\n} as const;\n\nexport type OverlayType = keyof typeof OVERLAY_DATA_ATTRIBUTES;\n\nexport type FullScreenOverlayProviderProps = {\n  children: ReactNode;\n  hasShadowDom?: boolean;\n  /**\n   * @experimental This is the element overlays will render into. By default, it's set to `document.body`.\n   *\n   * If you specify this value , it will render overlays into this container, such as the `shadowRootElement` over the document body. Most likely, you don't need to change this value, but you might run into strange issues related iframes and other shadow roots. This is here as a safeguard; not meant to be used.\n   */\n  overlayParentElement?: HTMLDivElement | HTMLElement;\n  /**\n   * Type of overlay being rendered. This controls the data attribute set on the overlay parent element.\n   * @default \"default\"\n   */\n  overlayType?: OverlayType;\n};\n\nconst FullScreenOverlayProvider = ({\n  children,\n  hasShadowDom,\n  overlayParentElement: overlayParentElementProp,\n  overlayType = \"default\",\n}: FullScreenOverlayProviderProps) => {\n  const {\n    overlayEmotionRootElement,\n    overlayParentElement,\n    overlayShadowRootElement,\n  } = useMemo(() => {\n    const overlayParentElement =\n      overlayParentElementProp || document.createElement(\"div\");\n\n    if (hasShadowDom) {\n      const { emotionRootElement, shadowRootElement } =\n        createShadowDomElements(overlayParentElement);\n\n      return {\n        overlayEmotionRootElement: emotionRootElement,\n        overlayParentElement,\n        overlayShadowRootElement: shadowRootElement,\n      };\n    }\n\n    return {\n      overlayEmotionRootElement: undefined,\n      overlayParentElement,\n      overlayShadowRootElement: undefined,\n    };\n  }, [hasShadowDom, overlayParentElementProp]);\n\n  useEffect(() => {\n    if (overlayParentElement) {\n      overlayParentElement.setAttribute(\n        OVERLAY_DATA_ATTRIBUTES[overlayType],\n        \"\",\n      );\n      document.body.append(overlayParentElement);\n    }\n\n    return () => {\n      overlayParentElement.remove();\n    };\n  }, [overlayParentElement, overlayType]);\n\n  const providerValue = useMemo(\n    () => ({\n      overlayEmotionRootElement,\n      overlayShadowRootElement,\n    }),\n    [overlayEmotionRootElement, overlayShadowRootElement],\n  );\n\n  return (\n    <FullScreenOverlayContext.Provider value={providerValue}>\n      {children}\n    </FullScreenOverlayContext.Provider>\n  );\n};\n\nconst MemoizedFullScreenOverlayProvider = memo(FullScreenOverlayProvider);\nMemoizedFullScreenOverlayProvider.displayName = \"FullScreenOverlayProvider\";\n\nexport { MemoizedFullScreenOverlayProvider as FullScreenOverlayProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,aAAa,EACbC,IAAI,EAEJC,UAAU,EACVC,SAAS,EACTC,OAAO,QACF,OAAO;AAEd,SAASC,uBAAuB,QAAQ,4CAA4C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOrF,OAAO,MAAMC,wBAAwB,GACnCR,aAAa,CAA+B,CAAC,CAAC,CAAC;AAEjD,OAAO,MAAMS,2BAA2B,GAAGA,CAAA,KACzCP,UAAU,CAACM,wBAAwB,CAAC;AAEtC,OAAO,MAAME,uBAAuB,GAAG;EACrCC,MAAM,EAAE,6CAA6C;EACrDC,MAAM,EAAE,6CAA6C;EACrDC,OAAO,EAAE;AACX,CAAU;AAoBV,MAAMC,yBAAyB,GAAGA,CAAC;EACjCC,QAAQ;EACRC,YAAY;EACZC,oBAAoB,EAAEC,wBAAwB;EAC9CC,WAAW,GAAG;AACgB,CAAC,KAAK;EACpC,MAAM;IACJC,yBAAyB;IACzBH,oBAAoB;IACpBI;EACF,CAAC,GAAGjB,OAAO,CAAC,MAAM;IAChB,MAAMa,oBAAoB,GACxBC,wBAAwB,IAAII,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAE3D,IAAIP,YAAY,EAAE;MAChB,MAAM;QAAEQ,kBAAkB;QAAEC;MAAkB,CAAC,GAC7CpB,uBAAuB,CAACY,oBAAoB,CAAC;MAE/C,OAAO;QACLG,yBAAyB,EAAEI,kBAAkB;QAC7CP,oBAAoB;QACpBI,wBAAwB,EAAEI;MAC5B,CAAC;IACH;IAEA,OAAO;MACLL,yBAAyB,EAAEM,SAAS;MACpCT,oBAAoB;MACpBI,wBAAwB,EAAEK;IAC5B,CAAC;EACH,CAAC,EAAE,CAACV,YAAY,EAAEE,wBAAwB,CAAC,CAAC;EAE5Cf,SAAS,CAAC,MAAM;IACd,IAAIc,oBAAoB,EAAE;MACxBA,oBAAoB,CAACU,YAAY,CAC/BjB,uBAAuB,CAACS,WAAW,CAAC,EACpC,EACF,CAAC;MACDG,QAAQ,CAACM,IAAI,CAACC,MAAM,CAACZ,oBAAoB,CAAC;IAC5C;IAEA,OAAO,MAAM;MACXA,oBAAoB,CAACa,MAAM,CAAC,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACb,oBAAoB,EAAEE,WAAW,CAAC,CAAC;EAEvC,MAAMY,aAAa,GAAG3B,OAAO,CAC3B,OAAO;IACLgB,yBAAyB;IACzBC;EACF,CAAC,CAAC,EACF,CAACD,yBAAyB,EAAEC,wBAAwB,CACtD,CAAC;EAED,OACEd,IAAA,CAACC,wBAAwB,CAACwB,QAAQ;IAACC,KAAK,EAAEF,aAAc;IAAAhB,QAAA,EACrDA;EAAQ,CACwB,CAAC;AAExC,CAAC;AAED,MAAMmB,iCAAiC,GAAGjC,IAAI,CAACa,yBAAyB,CAAC;AACzEoB,iCAAiC,CAACC,WAAW,GAAG,2BAA2B;AAE3E,SAASD,iCAAiC,IAAIpB,yBAAyB","ignoreList":[]}

package/dist/esm/HintLink.js

@@ -0,0 +1,23 @@
+/*!
+ * 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 } from "react";
+import { Link } from "./Link.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const HintLink = props => _jsx(Link, {
+  ...props,
+  variant: "monochrome"
+});
+const MemoizedHintLink = memo(HintLink);
+MemoizedHintLink.displayName = "HintLink";
+export { MemoizedHintLink as HintLink };
+//# sourceMappingURL=HintLink.js.map

package/dist/esm/HintLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HintLink.js","names":["memo","Link","jsx","_jsx","HintLink","props","variant","MemoizedHintLink","displayName"],"sources":["../../src/HintLink.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 } from \"react\";\n\nimport { Link, LinkProps } from \"./Link.js\";\n\nconst HintLink = (\n  props: Pick<\n    LinkProps,\n    \"children\" | \"href\" | \"onClick\" | \"rel\" | \"target\" | \"testId\"\n  >,\n) => <Link {...props} variant=\"monochrome\" />;\n\nconst MemoizedHintLink = memo(HintLink);\n\nMemoizedHintLink.displayName = \"HintLink\";\n\nexport { MemoizedHintLink as HintLink };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAE5B,SAASC,IAAI,QAAmB,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5C,MAAMC,QAAQ,GACZC,KAGC,IACEF,IAAA,CAACF,IAAI;EAAA,GAAKI,KAAK;EAAEC,OAAO,EAAC;AAAY,CAAE,CAAC;AAE7C,MAAMC,gBAAgB,GAAGP,IAAI,CAACI,QAAQ,CAAC;AAEvCG,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAIH,QAAQ","ignoreList":[]}

package/dist/esm/HtmlProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=HtmlProps.js.map

package/dist/esm/HtmlProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlProps.js","names":[],"sources":["../../src/HtmlProps.ts"],"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 { HTMLAttributes } from \"react\";\n\nexport type HtmlProps = {\n  /**\n   * Used in [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), the global aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.\n   */\n  ariaBusy?: HTMLAttributes<HTMLElement>[\"aria-busy\"];\n  /**\n   * The `aria-checked` attribute indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n   *\n   * NOTE: Where possible use an HTML `<input>` element with `type=\"checkbox\"` and `type=\"radio\"` as these have built in semantics and do not require ARIA attributes.\n   */\n  ariaChecked?: HTMLAttributes<HTMLElement>[\"aria-checked\"];\n  /**\n   * The global `aria-controls` property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.\n   *\n   * Value: A space-separated list of one or more ID values referencing the elements being controlled by the current element\n   */\n  ariaControls?: HTMLAttributes<HTMLElement>[\"aria-controls\"];\n  /**\n   * A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.\n   *\n   * Value:\n   * \n   * `page`\n      Represents the current page within a set of pages such as the link to the current document in a breadcrumb.\n\n      `step`\n      Represents the current step within a process such as the current step in an enumerated multi step checkout flow.\n\n      `location`\n      Represents the current location within an environment or context such as the image that is visually highlighted as the current component of a flow chart.\n\n      `date`\n      Represents the current date within a collection of dates such as the current date within a calendar.\n\n      `time`\n      Represents the current time within a set of times such as the current time within a timetable.\n\n      `true`\n      Represents the current item within a set.\n\n      `false` (default)\n        Does not represent the current item within a set.\n   */\n  ariaCurrent?: HTMLAttributes<HTMLElement>[\"aria-current\"];\n  /**\n   * The global `aria-describedby` attribute identifies the element (or elements) that describes the element on which the attribute is set.\n   *\n   * Value: The id or space-separated list of element ids that describe the current element.\n   *\n   * Note: The `aria-describedby` attribute is not designed to reference descriptions from external resources. It must reference elements in the same DOM document.\n   */\n  ariaDescribedBy?: HTMLAttributes<HTMLElement>[\"aria-describedby\"];\n  /**\n   * The `aria-errormessage` attribute on an object identifies the element that provides an error message for that object.\n   *\n   * Value: The value of the id of the element containing the error message for the current element\n   */\n  ariaErrorMessage?: HTMLAttributes<HTMLElement>[\"aria-errormessage\"];\n  /**\n   * The `aria-expanded` attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.\n   */\n  ariaExpanded?: HTMLAttributes<HTMLElement>[\"aria-expanded\"];\n  /**\n   * The `aria-haspopup` attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.\n   */\n  ariaHasPopup?: HTMLAttributes<HTMLElement>[\"aria-haspopup\"];\n  ariaHidden?: HTMLAttributes<HTMLElement>[\"aria-hidden\"];\n  /**\n   * The `aria-label` attribute defines a string value that labels an interactive element.\n   */\n  ariaLabel?: HTMLAttributes<HTMLElement>[\"aria-label\"];\n  /**\n   * The `aria-labelledby` attribute identifies the element (or elements) that labels the element it is applied to.\n   *\n   * Value: Space separated list of one or more ID values referencing the elements that label the current element.\n   */\n  ariaLabelledBy?: HTMLAttributes<HTMLElement>[\"aria-labelledby\"];\n  /**\n   * The `aria-pressed` attribute indicates the current \"pressed\" state of a toggle button.\n   */\n  ariaPressed?: HTMLAttributes<HTMLElement>[\"aria-pressed\"];\n  /**\n   * The `tabindex` global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable\n   *\n   * Note: Manipulating the natural tab order is generally advised against\n   */\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * This prop puts a `data` attribute on an HTML element in this component with the value provided.\n   *\n   * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.\n   */\n  testId?: string;\n  /**\n   * This prop puts a `translate` attribute on an HTML element. It should be used to indicate whether text within the element should be translated.\n   */\n  translate?: \"yes\" | \"no\";\n};\n"],"mappings":"","ignoreList":[]}

package/dist/esm/IconWithTooltip.js

@@ -0,0 +1,63 @@
+import _Tooltip from "@mui/material/Tooltip";
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo } from "react";
+import { InformationCircleIcon } from "./icons.generated/index.js";
+import { useMuiProps } from "./MuiPropsContext.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconContainer = styled.span(({
+  odysseyDesignTokens
+}) => ({
+  display: "inline-flex",
+  transitionProperty: "border-color, box-shadow, outline",
+  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+  border: "1px solid transparent",
+  "&:focus, &:focus-visible": {
+    borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+    boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,
+    outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,
+    outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight
+  },
+  svg: {
+    display: "flex"
+  }
+}));
+const IconWithTooltip = ({
+  IconComponent = _jsx(InformationCircleIcon, {}),
+  placement = "right",
+  testId,
+  tooltipText,
+  translate
+}) => {
+  const muiProps = useMuiProps();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsx(_Tooltip, {
+    "data-se": testId,
+    describeChild: true,
+    placement: placement,
+    tabIndex: 0,
+    title: tooltipText,
+    translate: translate,
+    children: _jsx(IconContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      ...muiProps,
+      children: IconComponent
+    })
+  });
+};
+const MemoizedIconWithTooltip = memo(IconWithTooltip);
+MemoizedIconWithTooltip.displayName = "IconWithTooltip";
+export { MemoizedIconWithTooltip as IconWithTooltip };
+//# sourceMappingURL=IconWithTooltip.js.map

package/dist/esm/IconWithTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconWithTooltip.js","names":["styled","memo","InformationCircleIcon","useMuiProps","useOdysseyDesignTokens","jsx","_jsx","IconContainer","span","odysseyDesignTokens","display","transitionProperty","transitionDuration","TransitionDurationMain","border","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","outlineOffset","FocusOutlineOffsetTight","svg","IconWithTooltip","IconComponent","placement","testId","tooltipText","translate","muiProps","_Tooltip","describeChild","tabIndex","title","children","MemoizedIconWithTooltip","displayName"],"sources":["../../src/IconWithTooltip.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 type { TooltipProps as MuiTooltipProps } from \"@mui/material\";\n\nimport styled from \"@emotion/styled\";\nimport { Tooltip as MuiTooltip } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\n\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport { InformationCircleIcon } from \"./icons.generated/index.js\";\nimport { useMuiProps } from \"./MuiPropsContext.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\n\nconst IconContainer = styled.span<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"inline-flex\",\n  transitionProperty: \"border-color, box-shadow, outline\",\n  transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n  border: \"1px solid transparent\",\n\n  \"&:focus, &:focus-visible\": {\n    borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n    boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n    outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n    outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,\n  },\n\n  svg: {\n    display: \"flex\",\n  },\n}));\n\nexport type IconWithTooltipProps = {\n  /**\n   * The icon to render. Defaults to `InformationCircleIcon`\n   */\n  IconComponent?: ReactNode;\n  /**\n   * The placement of the Tooltip\n   */\n  placement?: MuiTooltipProps[\"placement\"];\n  /**\n   * The text to display in the Tooltip\n   */\n  tooltipText: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst IconWithTooltip = ({\n  IconComponent = <InformationCircleIcon />,\n  placement = \"right\",\n  testId,\n  tooltipText,\n  translate,\n}: IconWithTooltipProps) => {\n  const muiProps = useMuiProps();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <MuiTooltip\n      data-se={testId}\n      describeChild\n      placement={placement}\n      tabIndex={0}\n      title={tooltipText}\n      translate={translate}\n    >\n      <IconContainer odysseyDesignTokens={odysseyDesignTokens} {...muiProps}>\n        {IconComponent}\n      </IconContainer>\n    </MuiTooltip>\n  );\n};\n\nconst MemoizedIconWithTooltip = memo(IconWithTooltip);\nMemoizedIconWithTooltip.displayName = \"IconWithTooltip\";\n\nexport { MemoizedIconWithTooltip as IconWithTooltip };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,IAAI,QAAmB,OAAO;AAGvC,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,WAAW,QAAQ,sBAAsB;AAClD,SAEEC,sBAAsB,QACjB,iCAAiC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEzC,MAAMC,aAAa,GAAGP,MAAM,CAACQ,IAAI,CAE9B,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,OAAO,EAAE,aAAa;EACtBC,kBAAkB,EAAE,mCAAmC;EACvDC,kBAAkB,EAAEH,mBAAmB,CAACI,sBAAsB;EAC9DC,MAAM,EAAE,uBAAuB;EAE/B,0BAA0B,EAAE;IAC1BC,WAAW,EAAEN,mBAAmB,CAACO,wBAAwB;IACzDC,SAAS,EAAE,aAAaR,mBAAmB,CAACO,wBAAwB,EAAE;IACtEE,OAAO,EAAE,GAAGT,mBAAmB,CAACU,qBAAqB,IAAIV,mBAAmB,CAACW,iBAAiB,cAAc;IAC5GC,aAAa,EAAEZ,mBAAmB,CAACa;EACrC,CAAC;EAEDC,GAAG,EAAE;IACHb,OAAO,EAAE;EACX;AACF,CAAC,CAAC,CAAC;AAiBH,MAAMc,eAAe,GAAGA,CAAC;EACvBC,aAAa,GAAGnB,IAAA,CAACJ,qBAAqB,IAAE,CAAC;EACzCwB,SAAS,GAAG,OAAO;EACnBC,MAAM;EACNC,WAAW;EACXC;AACoB,CAAC,KAAK;EAC1B,MAAMC,QAAQ,GAAG3B,WAAW,CAAC,CAAC;EAC9B,MAAMM,mBAAmB,GAAGL,sBAAsB,CAAC,CAAC;EAEpD,OACEE,IAAA,CAAAyB,QAAA;IACE,WAASJ,MAAO;IAChBK,aAAa;IACbN,SAAS,EAAEA,SAAU;IACrBO,QAAQ,EAAE,CAAE;IACZC,KAAK,EAAEN,WAAY;IACnBC,SAAS,EAAEA,SAAU;IAAAM,QAAA,EAErB7B,IAAA,CAACC,aAAa;MAACE,mBAAmB,EAAEA,mBAAoB;MAAA,GAAKqB,QAAQ;MAAAK,QAAA,EAClEV;IAAa,CACD;EAAC,CACN,CAAC;AAEjB,CAAC;AAED,MAAMW,uBAAuB,GAAGnC,IAAI,CAACuB,eAAe,CAAC;AACrDY,uBAAuB,CAACC,WAAW,GAAG,iBAAiB;AAEvD,SAASD,uBAAuB,IAAIZ,eAAe","ignoreList":[]}