@okta/odyssey-react-mui 1.29.0 → 1.32.0

package/dist/cjs/SearchField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.cjs","names":["_react","require","_styled","_interopRequireDefault","_index","_Field","_inputUtils","_OdysseyThemeProvider","_jsxRuntime","e","__esModule","default","searchVariantValues","exports","StyledContainerToEnsureThemeProviderDivIsFullWidth","styled","width","SearchField","forwardRef","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","tabIndex","testId","translate","value","variant","ref","useCallback","event","controlledStateRef","useRef","getControlState","controlledValue","uncontrolledValue","inputValues","useInputValues","controlState","current","renderFieldComponent","jsx","_InputBase2","inputProps","autoComplete","autoFocus","endAdornment","_InputAdornment2","position","children","_IconButton2","disabled","onClick","size","CloseCircleFilledIcon","startAdornment","SearchIcon","type","OdysseyThemeProvider","Field","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","memo","displayName"],"sources":["../../src/SearchField.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 { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated/index.js\";\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider.js\";\n\nexport const searchVariantValues = [\"outline\", \"filled\"] as const;\n\nconst StyledContainerToEnsureThemeProviderDivIsFullWidth = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the clear button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n  /**\n   * Whether the SearchField has a gray or white background\n   */\n  variant?: (typeof searchVariantValues)[number];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<Pick<HtmlProps, \"ariaDescribedBy\">> &\n  Pick<FieldComponentRenderProps, \"id\">;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      tabIndex,\n      testId,\n      translate,\n      value,\n      variant = \"outline\",\n    },\n    ref,\n  ) => {\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp],\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      }),\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }: FieldRenderProps) => (\n        <InputBase\n          {...inputValues}\n          inputProps={{\n            tabIndex,\n          }}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            (inputValues?.defaultValue || inputValues?.value) && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"Clear\"\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          data-ods-type=\"search\"\n          data-ods-variant={variant}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          translate={translate}\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        tabIndex,\n        testId,\n        translate,\n        variant,\n      ],\n    );\n\n    return (\n      <StyledContainerToEnsureThemeProviderDivIsFullWidth>\n        <OdysseyThemeProvider>\n          <Field\n            ariaDescribedBy={ariaDescribedBy}\n            fieldType=\"single\"\n            hasVisibleLabel={false}\n            id={idOverride}\n            isDisabled={isDisabled}\n            isFullWidth={isFullWidth}\n            isOptional={true}\n            label={label}\n            renderFieldComponent={renderFieldComponent}\n          />\n        </OdysseyThemeProvider>\n      </StyledContainerToEnsureThemeProviderDivIsFullWidth>\n    );\n  },\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/Select.cjs

@@ -0,0 +1,343 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectTestSelector = exports.Select = void 0;
+var _Select2 = _interopRequireDefault(require("@mui/material/Select"));
+var _MenuItem2 = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _ListItemSecondaryAction2 = _interopRequireDefault(require("@mui/material/ListItemSecondaryAction"));
+var _Checkbox2 = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _ListSubheader2 = _interopRequireDefault(require("@mui/material/ListSubheader"));
+var _Chip2 = _interopRequireDefault(require("@mui/material/Chip"));
+var _Box2 = _interopRequireDefault(require("@mui/material/Box"));
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Field = require("./Field.cjs");
+var _index = require("./icons.generated/index.cjs");
+var _inputUtils = require("./inputUtils.cjs");
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _useNormalizedKey = require("./useNormalizedKey.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const SelectTestSelector = exports.SelectTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label"
+  },
+  children: {
+    list: {
+      accessibleText: {
+        label: "label"
+      },
+      children: {
+        listItem: {
+          accessibleText: {
+            label: "label"
+          },
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name"
+            },
+            role: "option"
+          }
+        }
+      },
+      isControlledElement: true
+    }
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name"
+    },
+    role: "combobox"
+  }
+};
+const SelectContainer = _styled.default.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+`;
+const ChipsPositioningContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing0};
+  right: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing5};
+  bottom: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing0};
+  left: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing1};
+  margin-inline-start: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.BorderWidthMain};
+  opacity: 1;
+  pointer-events: none;
+`;
+const NonInteractiveIcon = (0, _styled.default)(_index.CloseCircleFilledIcon, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})`
+  font-size: 1em;
+  margin-inline-start: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing2};
+  margin-inline-end: -${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing1};
+  margin-block-end: -1px;
+`;
+const ChipsInnerContainer = (0, _styled.default)(_Box2.default, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isInteractive" && prop !== "isReadOnly"
+})`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing1};
+  pointer-events: none;
+  opacity: ${({
+  isInteractive,
+  isReadOnly
+}) => isInteractive || isReadOnly ? 1 : 0};
+  min-height: ${({
+  odysseyDesignTokens
+}) => odysseyDesignTokens.Spacing6};
+`;
+const {
+  CONTROLLED
+} = _inputUtils.ComponentControlledState;
+const Select = ({
+  ariaDescribedBy,
+  defaultValue,
+  errorMessage,
+  errorMessageList,
+  hasMultipleChoices: hasMultipleChoicesProp,
+  hint,
+  HintLinkComponent,
+  id: idOverride,
+  inputRef,
+  isDisabled = false,
+  isFullWidth = false,
+  isMultiSelect,
+  isOptional = false,
+  isReadOnly = false,
+  label,
+  name: nameOverride,
+  onBlur,
+  onChange: onChangeProp,
+  onFocus,
+  options,
+  testId,
+  translate,
+  value
+}) => {
+  const selectRef = (0, _react.useRef)(null);
+  const hasMultipleChoices = (0, _react.useMemo)(() => hasMultipleChoicesProp === undefined ? isMultiSelect : hasMultipleChoicesProp, [hasMultipleChoicesProp, isMultiSelect]);
+  const controlledStateRef = (0, _react.useRef)((0, _inputUtils.getControlState)({
+    controlledValue: value,
+    uncontrolledValue: defaultValue
+  }));
+  const [internalSelectedValues, setInternalSelectedValues] = (0, _react.useState)(controlledStateRef.current === CONTROLLED ? value : defaultValue);
+  const localInputRef = (0, _react.useRef)(null);
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  (0, _react.useImperativeHandle)(inputRef, () => {
+    return {
+      focus: () => {
+        localInputRef.current?.focus();
+      }
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      setInternalSelectedValues(value);
+    }
+  }, [value]);
+  const inputValues = (0, _inputUtils.useInputValues)({
+    defaultValue,
+    value,
+    controlState: controlledStateRef.current
+  });
+  const onChange = (0, _react.useCallback)((event, child) => {
+    if (isReadOnly) {
+      event.preventDefault();
+    } else {
+      const {
+        target: {
+          value
+        }
+      } = event;
+      if (controlledStateRef.current !== CONTROLLED) {
+        setInternalSelectedValues(typeof value === "string" && hasMultipleChoices ? value.split(",") : value);
+      }
+      onChangeProp?.(event, child);
+    }
+  }, [hasMultipleChoices, onChangeProp, isReadOnly]);
+  const [normalizedOptions, normalizedOptionsMap] = (0, _react.useMemo)(() => {
+    const normalizedOptions = options.map(option => {
+      if (typeof option === "object") {
+        const value = option?.value === "" ? option.value : option.value || option.text;
+        return {
+          text: option.text,
+          value,
+          type: option.type === "heading" ? "heading" : "option"
+        };
+      }
+      return {
+        text: option,
+        value: option,
+        type: "option"
+      };
+    });
+    const normalizedOptionsMap = new Map(normalizedOptions.map(option => [option.value, option]));
+    return [normalizedOptions, normalizedOptionsMap];
+  }, [options]);
+  const removeSelectedValue = (0, _react.useCallback)(selectedValue => {
+    if (Array.isArray(internalSelectedValues)) {
+      const newValue = internalSelectedValues.filter(internalSelectedValue => internalSelectedValue !== selectedValue);
+      const syntheticEvent = {
+        target: {
+          value: newValue
+        }
+      };
+      onChange(syntheticEvent, null);
+    }
+  }, [internalSelectedValues, onChange]);
+  const Chips = (0, _react.useCallback)(({
+    isInteractive,
+    isReadOnly
+  }) => {
+    const stopPropagation = event => event.stopPropagation();
+    const hasNonInteractiveIcon = !isInteractive && controlledStateRef.current === CONTROLLED && hasMultipleChoices;
+    return Array.isArray(internalSelectedValues) && (0, _jsxRuntime.jsx)(ChipsInnerContainer, {
+      isInteractive: isInteractive,
+      isReadOnly: isReadOnly,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: internalSelectedValues.map(item => item?.length > 0 && (0, _jsxRuntime.jsx)(_Chip2.default, {
+        label: (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [normalizedOptionsMap.get(item)?.text, hasNonInteractiveIcon && (0, _jsxRuntime.jsx)(NonInteractiveIcon, {
+            odysseyDesignTokens: odysseyDesignTokens
+          })]
+        }),
+        tabIndex: -1,
+        onDelete: isInteractive && controlledStateRef.current === CONTROLLED ? () => removeSelectedValue(item) : undefined,
+        deleteIcon: (0, _jsxRuntime.jsx)(_index.CloseCircleFilledIcon, {
+          sx: {
+            pointerEvents: "auto"
+          },
+          onMouseDown: stopPropagation
+        })
+      }, item))
+    });
+  }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, removeSelectedValue, normalizedOptionsMap]);
+  const renderedOptions = (0, _react.useMemo)(() => normalizedOptions.map((option, index) => {
+    if (option.type === "heading") {
+      return (0, _jsxRuntime.jsxs)(_ListSubheader2.default, {
+        children: [" ", option.text, " "]
+      }, option.text);
+    }
+    const isSelected = hasMultipleChoices ? internalSelectedValues?.includes(option.value) : internalSelectedValues === option.value;
+    return (0, _jsxRuntime.jsxs)(_MenuItem2.default, {
+      "data-empty": !option.text,
+      value: option.value,
+      selected: isSelected,
+      children: [hasMultipleChoices && (0, _jsxRuntime.jsx)(_Checkbox2.default, {
+        checked: isSelected
+      }), option.text, !hasMultipleChoices && internalSelectedValues === option.value && (0, _jsxRuntime.jsx)(_ListItemSecondaryAction2.default, {
+        children: (0, _jsxRuntime.jsx)(_index.CheckIcon, {})
+      })]
+    }, (0, _useNormalizedKey.normalizedKey)(option.text, index.toString()));
+  }), [hasMultipleChoices, normalizedOptions, internalSelectedValues]);
+  const renderValue = (0, _react.useCallback)(value => Array.isArray(value) && (0, _jsxRuntime.jsx)(Chips, {
+    isInteractive: false
+  }), [Chips]);
+  const renderFieldComponent = (0, _react.useCallback)(({
+    ariaDescribedBy,
+    errorMessageElementId,
+    id,
+    labelElementId
+  }) => (0, _jsxRuntime.jsxs)(SelectContainer, {
+    children: [(0, _jsxRuntime.jsx)(_Select2.default, {
+      ...inputValues,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": errorMessageElementId,
+      displayEmpty: true,
+      id: id,
+      inputProps: {
+        "data-se": testId,
+        "aria-disabled": isDisabled || isReadOnly,
+        readOnly: isReadOnly
+      },
+      inputRef: el => {
+        if (localInputRef.current !== el) {
+          localInputRef.current = el;
+        }
+        selectRef.current = el;
+      },
+      labelId: labelElementId,
+      MenuProps: {
+        sx: {
+          ".MuiPaper-root": {
+            maxHeight: "50vh"
+          }
+        }
+      },
+      multiple: hasMultipleChoices,
+      name: nameOverride ?? id,
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      renderValue: hasMultipleChoices ? renderValue : undefined,
+      translate: translate,
+      children: renderedOptions
+    }), hasMultipleChoices && (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: (0, _jsxRuntime.jsx)(ChipsPositioningContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: (0, _jsxRuntime.jsx)(Chips, {
+          isInteractive: !isReadOnly,
+          isReadOnly: isReadOnly
+        })
+      })
+    })]
+  }), [Chips, inputValues, hasMultipleChoices, isDisabled, isReadOnly, nameOverride, odysseyDesignTokens, onBlur, onChange, onFocus, renderedOptions, renderValue, testId, translate]);
+  return (0, _jsxRuntime.jsx)(_Field.Field, {
+    ariaDescribedBy: ariaDescribedBy,
+    errorMessage: errorMessage,
+    errorMessageList: errorMessageList,
+    fieldType: "single",
+    hasVisibleLabel: true,
+    hint: hint,
+    HintLinkComponent: HintLinkComponent,
+    id: idOverride,
+    isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
+    isOptional: isOptional,
+    label: label,
+    renderFieldComponent: renderFieldComponent
+  });
+};
+const MemoizedSelect = exports.Select = (0, _react.memo)(Select);
+MemoizedSelect.displayName = "Select";
+//# sourceMappingURL=Select.cjs.map

package/dist/cjs/Select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","names":["_react","require","_styled","_interopRequireDefault","_Field","_index","_inputUtils","_OdysseyDesignTokensContext","_useNormalizedKey","_jsxRuntime","e","__esModule","default","SelectTestSelector","exports","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","SelectContainer","styled","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","CloseCircleFilledIcon","Spacing2","ChipsInnerContainer","_Box2","isInteractive","isReadOnly","Spacing6","CONTROLLED","ComponentControlledState","Select","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","selectRef","useRef","useMemo","undefined","controlledStateRef","getControlState","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","useState","current","localInputRef","useOdysseyDesignTokens","useImperativeHandle","focus","useEffect","inputValues","useInputValues","controlState","useCallback","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","jsx","item","length","_Chip2","jsxs","Fragment","get","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","renderedOptions","index","_ListSubheader2","isSelected","includes","_MenuItem2","selected","_Checkbox2","checked","_ListItemSecondaryAction2","CheckIcon","normalizedKey","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select2","displayEmpty","inputProps","readOnly","el","labelId","MenuProps","maxHeight","multiple","Field","fieldType","hasVisibleLabel","MemoizedSelect","memo","displayName"],"sources":["../../src/Select.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  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n  SelectChangeEvent,\n} from \"@mui/material\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated/index.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { TestSelector } from \"./test-selectors/index.js\";\nimport { normalizedKey } from \"./useNormalizedKey.js\";\n\nexport const SelectTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      accessibleText: {\n        label: \"label\",\n      },\n      children: {\n        listItem: {\n          accessibleText: {\n            label: \"label\",\n          },\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive, isReadOnly }) =>\n    isInteractive || isReadOnly ? 1 : 0};\n  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          MenuProps={{\n            sx: {\n              \".MuiPaper-root\": {\n                maxHeight: \"50vh\",\n              },\n            },\n          }}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/Stack.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stackSpacingValues = exports.stackDirectionValues = exports.Stack = void 0;
+var _Stack2 = _interopRequireDefault(require("@mui/material/Stack"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.")
+ *
+ * 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.
+ */
+
+const stackSpacingValues = exports.stackSpacingValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+const stackDirectionValues = exports.stackDirectionValues = ["row", "row-reverse", "column", "column-reverse"];
+const Stack = ({
+  children,
+  direction = "column",
+  spacing = 2
+}) => {
+  return (0, _jsxRuntime.jsx)(_Stack2.default, {
+    direction: direction,
+    spacing: spacing,
+    children: children
+  });
+};
+const MemoizedStack = exports.Stack = (0, _react.memo)(Stack);
+MemoizedStack.displayName = "Stack";
+//# sourceMappingURL=Stack.cjs.map

package/dist/cjs/Stack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.cjs","names":["_react","require","_jsxRuntime","_interopRequireDefault","e","__esModule","default","stackSpacingValues","exports","stackDirectionValues","Stack","children","direction","spacing","jsx","_Stack2","MemoizedStack","memo","displayName"],"sources":["../../src/Stack.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\";\nimport { Stack as MuiStack, StackProps as MuiStackProps } from \"@mui/material\";\n\nexport const stackSpacingValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\nexport const stackDirectionValues = [\n  \"row\",\n  \"row-reverse\",\n  \"column\",\n  \"column-reverse\",\n] as const;\n\nexport type OdysseyStackProps = {\n  children?: MuiStackProps[\"children\"];\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: MuiStackProps[\"component\"];\n  /**\n   * Defines the flex-direction style property. It is applied for all screen sizes.\n   */\n  direction?: (typeof stackDirectionValues)[number];\n  /**\n   * Defines the space between immediate children.\n   */\n  spacing?: (typeof stackSpacingValues)[number];\n  sx?: MuiStackProps[\"sx\"];\n};\n\nconst Stack = ({\n  children,\n  direction = \"column\",\n  spacing = 2,\n}: OdysseyStackProps) => {\n  return (\n    <MuiStack direction={direction} spacing={spacing}>\n      {children}\n    </MuiStack>\n  );\n};\n\nconst MemoizedStack = memo(Stack);\nMemoizedStack.displayName = \"Stack\";\n\nexport { MemoizedStack as Stack };\n"],"mappings":";;;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAA6B,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAZ7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKO,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU;AAClE,MAAME,oBAAoB,GAAAD,OAAA,CAAAC,oBAAA,GAAG,CAClC,KAAK,EACL,aAAa,EACb,QAAQ,EACR,gBAAgB,CACR;AAmBV,MAAMC,KAAK,GAAGA,CAAC;EACbC,QAAQ;EACRC,SAAS,GAAG,QAAQ;EACpBC,OAAO,GAAG;AACO,CAAC,KAAK;EACvB,OACE,IAAAX,WAAA,CAAAY,GAAA,EAAAC,OAAA,CAAAT,OAAA;IAAUM,SAAS,EAAEA,SAAU;IAACC,OAAO,EAAEA,OAAQ;IAAAF,QAAA,EAC9CA;EAAQ,CACD,CAAC;AAEf,CAAC;AAED,MAAMK,aAAa,GAAAR,OAAA,CAAAE,KAAA,GAAG,IAAAO,WAAI,EAACP,KAAK,CAAC;AACjCM,aAAa,CAACE,WAAW,GAAG,OAAO","ignoreList":[]}

package/dist/cjs/Status.cjs

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.statusVariantValues = exports.statusSeverityValues = exports.Status = void 0;
+var _Chip2 = _interopRequireDefault(require("@mui/material/Chip"));
+var _react = require("react");
+var _MuiPropsContext = require("./MuiPropsContext.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const statusSeverityValues = exports.statusSeverityValues = ["default", "error", "info", "success", "warning"];
+const statusVariantValues = exports.statusVariantValues = ["lamp", "pill"];
+const Status = ({
+  label,
+  severity,
+  testId,
+  translate,
+  variant = "pill"
+}) => {
+  const muiProps = (0, _MuiPropsContext.useMuiProps)();
+  return (0, _jsxRuntime.jsx)(_Chip2.default, {
+    ...muiProps,
+    color: severity,
+    "data-se": testId,
+    label: label,
+    translate: translate,
+    variant: variant
+  });
+};
+const MemoizedStatus = exports.Status = (0, _react.memo)(Status);
+MemoizedStatus.displayName = "Status";
+//# sourceMappingURL=Status.cjs.map

package/dist/cjs/Status.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Status.cjs","names":["_react","require","_MuiPropsContext","_jsxRuntime","_interopRequireDefault","e","__esModule","default","statusSeverityValues","exports","statusVariantValues","Status","label","severity","testId","translate","variant","muiProps","useMuiProps","jsx","_Chip2","color","MemoizedStatus","memo","displayName"],"sources":["../../src/Status.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\";\nimport { Chip } from \"@mui/material\";\n\nimport { useMuiProps } from \"./MuiPropsContext.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport const statusSeverityValues = [\n  \"default\",\n  \"error\",\n  \"info\",\n  \"success\",\n  \"warning\",\n] as const;\nexport const statusVariantValues = [\"lamp\", \"pill\"] as const;\n\nexport type StatusProps = {\n  /**\n   * The text content of the Status\n   */\n  label: string;\n  /**\n   * Determine the color and icon of the Status\n   */\n  severity: (typeof statusSeverityValues)[number];\n  /**\n   * The style of the Status indicator\n   */\n  variant?: (typeof statusVariantValues)[number];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Status = ({\n  label,\n  severity,\n  testId,\n  translate,\n  variant = \"pill\",\n}: StatusProps) => {\n  const muiProps = useMuiProps();\n\n  return (\n    <Chip\n      {...muiProps}\n      color={severity}\n      data-se={testId}\n      label={label}\n      translate={translate}\n      variant={variant}\n    />\n  );\n};\n\nconst MemoizedStatus = memo(Status);\nMemoizedStatus.displayName = \"Status\";\n\nexport { MemoizedStatus as Status };\n"],"mappings":";;;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAGA,IAAAC,gBAAA,GAAAD,OAAA;AAAmD,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAG,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAfnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQO,MAAMG,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,CAClC,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,CACD;AACH,MAAME,mBAAmB,GAAAD,OAAA,CAAAC,mBAAA,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU;AAiB5D,MAAMC,MAAM,GAAGA,CAAC;EACdC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,SAAS;EACTC,OAAO,GAAG;AACC,CAAC,KAAK;EACjB,MAAMC,QAAQ,GAAG,IAAAC,4BAAW,EAAC,CAAC;EAE9B,OACE,IAAAf,WAAA,CAAAgB,GAAA,EAAAC,MAAA,CAAAb,OAAA;IAAA,GACMU,QAAQ;IACZI,KAAK,EAAER,QAAS;IAChB,WAASC,MAAO;IAChBF,KAAK,EAAEA,KAAM;IACbG,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA;EAAQ,CAClB,CAAC;AAEN,CAAC;AAED,MAAMM,cAAc,GAAAb,OAAA,CAAAE,MAAA,GAAG,IAAAY,WAAI,EAACZ,MAAM,CAAC;AACnCW,cAAc,CAACE,WAAW,GAAG,QAAQ","ignoreList":[]}

package/dist/cjs/Surface.cjs

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Surface = void 0;
+var _Paper2 = _interopRequireDefault(require("@mui/material/Paper"));
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _OdysseyThemeProvider = require("./OdysseyThemeProvider.cjs");
+var _useContrastMode = require("./useContrastMode.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const StyledContainer = (0, _styled.default)(_Paper2.default, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "contrastMode"
+})(({
+  contrastMode,
+  odysseyDesignTokens
+}) => ({
+  borderRadius: odysseyDesignTokens.Spacing4,
+  padding: odysseyDesignTokens.Spacing5,
+  border: contrastMode === "lowContrast" ? `1px solid ${odysseyDesignTokens.HueNeutral100}` : "none",
+  boxShadow: "none"
+}));
+const Surface = ({
+  children
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const {
+    contrastMode
+  } = (0, _useContrastMode.useContrastModeContext)();
+  return (0, _jsxRuntime.jsx)(StyledContainer, {
+    contrastMode: contrastMode,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: (0, _jsxRuntime.jsx)(_OdysseyThemeProvider.OdysseyThemeProvider, {
+      children: children
+    })
+  });
+};
+const MemoizedSurface = exports.Surface = (0, _react.memo)(Surface);
+MemoizedSurface.displayName = "Surface";
+//# sourceMappingURL=Surface.cjs.map

package/dist/cjs/Surface.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.cjs","names":["_react","require","_styled","_interopRequireDefault","_OdysseyDesignTokensContext","_OdysseyThemeProvider","_useContrastMode","_jsxRuntime","e","__esModule","default","StyledContainer","styled","_Paper2","shouldForwardProp","prop","contrastMode","odysseyDesignTokens","borderRadius","Spacing4","padding","Spacing5","border","HueNeutral100","boxShadow","Surface","children","useOdysseyDesignTokens","useContrastModeContext","jsx","OdysseyThemeProvider","MemoizedSurface","exports","memo","displayName"],"sources":["../../src/Surface.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, ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Paper as MuiPaper } from \"@mui/material\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider.js\";\nimport { useContrastModeContext, ContrastMode } from \"./useContrastMode.js\";\n\nconst StyledContainer = styled(MuiPaper, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"contrastMode\",\n})<{\n  contrastMode: ContrastMode;\n  odysseyDesignTokens: DesignTokens;\n}>(({ contrastMode, odysseyDesignTokens }) => ({\n  borderRadius: odysseyDesignTokens.Spacing4,\n  padding: odysseyDesignTokens.Spacing5,\n  border:\n    contrastMode === \"lowContrast\"\n      ? `1px solid ${odysseyDesignTokens.HueNeutral100}`\n      : \"none\",\n  boxShadow: \"none\",\n}));\n\nexport type SurfaceProps = {\n  children: ReactNode;\n};\n\nconst Surface = ({ children }: SurfaceProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { contrastMode } = useContrastModeContext();\n\n  return (\n    <StyledContainer\n      contrastMode={contrastMode}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      <OdysseyThemeProvider>{children}</OdysseyThemeProvider>\n    </StyledContainer>\n  );\n};\n\nconst MemoizedSurface = memo(Surface);\nMemoizedSurface.displayName = \"Surface\";\n\nexport { MemoizedSurface as Surface };\n"],"mappings":";;;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAGA,IAAAG,2BAAA,GAAAH,OAAA;AAIA,IAAAI,qBAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AAA4E,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AArB5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAaA,MAAMG,eAAe,GAAG,IAAAC,eAAM,EAAAC,OAAA,CAAAH,OAAA,EAAW;EACvCI,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,YAAY;EAAEC;AAAoB,CAAC,MAAM;EAC7CC,YAAY,EAAED,mBAAmB,CAACE,QAAQ;EAC1CC,OAAO,EAAEH,mBAAmB,CAACI,QAAQ;EACrCC,MAAM,EACJN,YAAY,KAAK,aAAa,GAC1B,aAAaC,mBAAmB,CAACM,aAAa,EAAE,GAChD,MAAM;EACZC,SAAS,EAAE;AACb,CAAC,CAAC,CAAC;AAMH,MAAMC,OAAO,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EAC9C,MAAMT,mBAAmB,GAAG,IAAAU,kDAAsB,EAAC,CAAC;EACpD,MAAM;IAAEX;EAAa,CAAC,GAAG,IAAAY,uCAAsB,EAAC,CAAC;EAEjD,OACE,IAAArB,WAAA,CAAAsB,GAAA,EAAClB,eAAe;IACdK,YAAY,EAAEA,YAAa;IAC3BC,mBAAmB,EAAEA,mBAAoB;IAAAS,QAAA,EAEzC,IAAAnB,WAAA,CAAAsB,GAAA,EAACxB,qBAAA,CAAAyB,oBAAoB;MAAAJ,QAAA,EAAEA;IAAQ,CAAuB;EAAC,CACxC,CAAC;AAEtB,CAAC;AAED,MAAMK,eAAe,GAAAC,OAAA,CAAAP,OAAA,GAAG,IAAAQ,WAAI,EAACR,OAAO,CAAC;AACrCM,eAAe,CAACG,WAAW,GAAG,SAAS","ignoreList":[]}

package/dist/cjs/SvgIcon.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SvgIcon", {
+  enumerable: true,
+  get: function () {
+    return _material.SvgIcon;
+  }
+});
+var _material = require("@mui/material");
+//# sourceMappingURL=SvgIcon.cjs.map

package/dist/cjs/SvgIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgIcon.cjs","names":["_material","require"],"sources":["../../src/SvgIcon.ts"],"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 { SvgIconProps } from \"@mui/material\";\n\nexport { SvgIcon } from \"@mui/material\";\n\nexport interface SvgIconNoChildrenProps extends Omit<SvgIconProps, \"children\"> {\n  /**\n   * Children are never rendered.\n   */\n  children?: never;\n}\n"],"mappings":";;;;;;;;;;;AAcA,IAAAA,SAAA,GAAAC,OAAA","ignoreList":[]}