@okta/odyssey-react-mui 1.9.9 → 1.9.10

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.10](https://github.com/okta/odyssey/compare/v1.9.9...v1.9.10) (2023-12-21)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
 ## [1.9.9](https://github.com/okta/odyssey/compare/v1.9.8...v1.9.9) (2023-12-20)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/index.js

@@ -55,6 +55,7 @@ export * from "./TextField.js";
 export * from "./theme/index.js";
 export * from "./Toast.js";
 export * from "./ToastStack.js";
+export * from "./labs/Switch.js";
 export * from "./Tooltip.js";
 export * from "./Typography.js";
 export * from "./useUniqueId.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","useOdysseyDesignTokens","odysseyTranslate"],"sources":["../src/index.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\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./CssBaseline\";\nexport * from \"./createShadowRootElement\";\nexport * from \"./createUniqueId\";\nexport * from \"./Dialog\";\nexport * from \"./Fieldset\";\nexport * from \"./FieldComponentProps\";\nexport * from \"./Form\";\nexport * from \"./HintLink\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport { odysseyTranslate } from \"./i18n\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Status\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EACjBC,aAAa,QACR,eAAe;AAAC,SAiBdC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA0BtBC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","useOdysseyDesignTokens","odysseyTranslate"],"sources":["../src/index.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\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./CssBaseline\";\nexport * from \"./createShadowRootElement\";\nexport * from \"./createUniqueId\";\nexport * from \"./Dialog\";\nexport * from \"./Fieldset\";\nexport * from \"./FieldComponentProps\";\nexport * from \"./Form\";\nexport * from \"./HintLink\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport { odysseyTranslate } from \"./i18n\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Status\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./labs/Switch\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EACjBC,aAAa,QACR,eAAe;AAAC,SAiBdC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA0BtBC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/labs/Switch.js

@@ -0,0 +1,157 @@
+import _FormControlLabel from "@mui/material/FormControlLabel";
+import _Switch from "@mui/material/Switch";
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+const {
+  CONTROLLED
+} = ComponentControlledState;
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { Box } from "../Box.js";
+import { FieldHint } from "../FieldHint.js";
+import { useUniqueId } from "../useUniqueId.js";
+import { ComponentControlledState, getControlState } from "../inputUtils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const SwitchLabel = _ref => {
+  let {
+    checked,
+    hint,
+    hintId,
+    isFullWidth,
+    label
+  } = _ref;
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(_Fragment, {
+    children: [_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: odysseyDesignTokens.Spacing1,
+        margin: 0,
+        maxWidth: isFullWidth ? "100%" : odysseyDesignTokens.TypographyLineLengthMax,
+        fontWeight: odysseyDesignTokens.TypographyWeightBodyBold
+      },
+      children: [label, _jsx(Box, {
+        sx: {
+          padding: "2px 4px",
+          backgroundColor: checked ? odysseyDesignTokens.PaletteSuccessLighter : odysseyDesignTokens.HueNeutral100,
+          borderRadius: odysseyDesignTokens.BorderRadiusMain,
+          color: checked ? odysseyDesignTokens.PaletteSuccessText : odysseyDesignTokens.HueNeutral700,
+          fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
+          fontSize: odysseyDesignTokens.TypographyScale0,
+          lineHeight: odysseyDesignTokens.TypographyLineHeightOverline,
+          transitionProperty: "background-color, color",
+          transitionDuration: odysseyDesignTokens.TransitionDurationMain
+        },
+        children: checked ? "Active" : "Inactive"
+      })]
+    }), hint && _jsx(FieldHint, {
+      id: hintId,
+      text: hint
+    })]
+  });
+};
+const Switch = _ref2 => {
+  let {
+    hint,
+    id: _id,
+    isChecked,
+    isDefaultChecked,
+    isDisabled,
+    isFullWidth = false,
+    label,
+    name: _name,
+    onChange,
+    testId,
+    value = "Something"
+  } = _ref2;
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const controlledStateRef = useRef(getControlState({
+    controlledValue: isChecked,
+    uncontrolledValue: isDefaultChecked
+  }));
+  const inputValues = useMemo(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      return {
+        checked: isChecked
+      };
+    }
+    return {
+      defaultChecked: isDefaultChecked
+    };
+  }, [isDefaultChecked, isChecked]);
+  const [internalSwitchChecked, setInternalSwitchChecked] = useState(controlledStateRef.current === CONTROLLED ? Boolean(isChecked) : Boolean(isDefaultChecked));
+  useEffect(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      setInternalSwitchChecked(Boolean(isChecked));
+    }
+  }, [isChecked]);
+  const id = useUniqueId(_id);
+  const hintId = hint ? `${id}-hint` : undefined;
+  const labelElementId = `${id}-label`;
+  const handleOnChange = useCallback((_, checked) => {
+    setInternalSwitchChecked(checked);
+    onChange?.({
+      checked,
+      value
+    });
+  }, [onChange, setInternalSwitchChecked, value]);
+  const renderSwitchComponent = useMemo(() => _jsx(_Switch, {
+    ...inputValues,
+    disabled: isDisabled,
+    disableRipple: true,
+    inputProps: {
+      "aria-checked": internalSwitchChecked,
+      "aria-describedby": hintId,
+      "aria-label": label,
+      "aria-labelledby": labelElementId
+    },
+    name: _name ?? id,
+    onChange: handleOnChange
+  }), [handleOnChange, hintId, inputValues, internalSwitchChecked, id, isDisabled, label, labelElementId, _name]);
+  return _jsx(Box, {
+    sx: {
+      marginBlockEnd: odysseyDesignTokens.Spacing2
+    },
+    children: _jsx(_FormControlLabel, {
+      checked: internalSwitchChecked,
+      control: renderSwitchComponent,
+      "data-se": testId,
+      disabled: isDisabled,
+      id: labelElementId,
+      label: _jsx(SwitchLabel, {
+        checked: internalSwitchChecked,
+        hint: hint,
+        hintId: hintId,
+        isFullWidth: isFullWidth,
+        label: label
+      }),
+      labelPlacement: "start",
+      sx: {
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        gap: odysseyDesignTokens.Spacing4,
+        width: "100%",
+        maxWidth: isFullWidth ? "100%" : odysseyDesignTokens.TypographyLineLengthMax
+      },
+      value: value
+    })
+  });
+};
+const MemoizedSwitch = memo(Switch);
+MemoizedSwitch.displayName = "Switch";
+export { MemoizedSwitch as Switch };
+//# sourceMappingURL=Switch.js.map

package/dist/labs/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","CONTROLLED","ComponentControlledState","useOdysseyDesignTokens","Box","FieldHint","useUniqueId","getControlState","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SwitchLabel","_ref","checked","hint","hintId","isFullWidth","label","odysseyDesignTokens","children","sx","display","alignItems","flexWrap","gap","Spacing1","margin","maxWidth","TypographyLineLengthMax","fontWeight","TypographyWeightBodyBold","padding","backgroundColor","PaletteSuccessLighter","HueNeutral100","borderRadius","BorderRadiusMain","color","PaletteSuccessText","HueNeutral700","fontSize","TypographyScale0","lineHeight","TypographyLineHeightOverline","transitionProperty","transitionDuration","TransitionDurationMain","id","text","Switch","_ref2","_id","isChecked","isDefaultChecked","isDisabled","name","_name","onChange","testId","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","defaultChecked","internalSwitchChecked","setInternalSwitchChecked","Boolean","undefined","labelElementId","handleOnChange","_","renderSwitchComponent","_Switch","disabled","disableRipple","inputProps","marginBlockEnd","Spacing2","_FormControlLabel","control","labelPlacement","justifyContent","Spacing4","width","MemoizedSwitch","displayName"],"sources":["../../src/labs/Switch.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  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Switch as MuiSwitch,\n  SwitchProps as MuiSwitchProps,\n  FormControlLabel,\n} from \"@mui/material\";\n\nconst { CONTROLLED } = ComponentControlledState;\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\nimport { Box } from \"../Box\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport { FieldHint } from \"../FieldHint\";\nimport type { SeleniumProps } from \"../SeleniumProps\";\nimport { useUniqueId } from \"../useUniqueId\";\nimport { ComponentControlledState, getControlState } from \"../inputUtils\";\nimport { CheckedFieldProps } from \"../FormCheckedProps\";\n\ntype OnChangeCallbackArguments = {\n  checked: boolean;\n  value: string;\n};\n\nexport type SwitchProps = {\n  /**\n   * if `true`, the label and switch span entire containing element's width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The label text for the Switch\n   */\n  label: string;\n  /**\n   * The change event handler for the Switch\n   */\n  onChange?: ({ checked, value }: OnChangeCallbackArguments) => void;\n  /**\n   * The value attribute of the Switch\n   */\n  value: string;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isFullWidth\" | \"isDisabled\" | \"name\"\n> &\n  CheckedFieldProps<MuiSwitchProps> &\n  SeleniumProps;\n\ntype SwitchLabelProps = {\n  checked: boolean;\n  hint: SwitchProps[\"hint\"];\n  hintId?: string;\n  isFullWidth: SwitchProps[\"isFullWidth\"];\n  label: SwitchProps[\"label\"];\n};\n\nconst SwitchLabel = ({\n  checked,\n  hint,\n  hintId,\n  isFullWidth,\n  label,\n}: SwitchLabelProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: \"flex\",\n          alignItems: \"center\",\n          flexWrap: \"wrap\",\n          gap: odysseyDesignTokens.Spacing1,\n          margin: 0,\n          maxWidth: isFullWidth\n            ? \"100%\"\n            : odysseyDesignTokens.TypographyLineLengthMax,\n          fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n        }}\n      >\n        {label}\n        <Box\n          sx={{\n            padding: \"2px 4px\",\n            backgroundColor: checked\n              ? odysseyDesignTokens.PaletteSuccessLighter\n              : odysseyDesignTokens.HueNeutral100,\n            borderRadius: odysseyDesignTokens.BorderRadiusMain,\n            color: checked\n              ? odysseyDesignTokens.PaletteSuccessText\n              : odysseyDesignTokens.HueNeutral700,\n            fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n            fontSize: odysseyDesignTokens.TypographyScale0,\n            lineHeight: odysseyDesignTokens.TypographyLineHeightOverline,\n            transitionProperty: \"background-color, color\",\n            transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n          }}\n        >\n          {checked ? \"Active\" : \"Inactive\"}\n        </Box>\n      </Box>\n      {hint && <FieldHint id={hintId} text={hint} />}\n    </>\n  );\n};\n\nconst Switch = ({\n  hint,\n  id: _id,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isFullWidth = false,\n  label,\n  name: _name,\n  onChange,\n  testId,\n  value = \"Something\",\n}: SwitchProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    })\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const [internalSwitchChecked, setInternalSwitchChecked] = useState(\n    controlledStateRef.current === CONTROLLED\n      ? Boolean(isChecked)\n      : Boolean(isDefaultChecked)\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSwitchChecked(Boolean(isChecked));\n    }\n  }, [isChecked]);\n\n  const id = useUniqueId(_id);\n\n  const hintId = hint ? `${id}-hint` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const handleOnChange = useCallback(\n    (_: SyntheticEvent<Element, Event>, checked: boolean) => {\n      setInternalSwitchChecked(checked);\n      onChange?.({ checked, value });\n    },\n    [onChange, setInternalSwitchChecked, value]\n  );\n\n  const renderSwitchComponent = useMemo(\n    () => (\n      <MuiSwitch\n        {...inputValues}\n        disabled={isDisabled}\n        disableRipple\n        inputProps={{\n          \"aria-checked\": internalSwitchChecked,\n          \"aria-describedby\": hintId,\n          \"aria-label\": label,\n          \"aria-labelledby\": labelElementId,\n        }}\n        name={_name ?? id}\n        onChange={handleOnChange}\n      />\n    ),\n    [\n      handleOnChange,\n      hintId,\n      inputValues,\n      internalSwitchChecked,\n      id,\n      isDisabled,\n      label,\n      labelElementId,\n      _name,\n    ]\n  );\n\n  return (\n    <Box\n      sx={{\n        marginBlockEnd: odysseyDesignTokens.Spacing2,\n      }}\n    >\n      <FormControlLabel\n        checked={internalSwitchChecked}\n        control={renderSwitchComponent}\n        data-se={testId}\n        disabled={isDisabled}\n        id={labelElementId}\n        label={\n          <SwitchLabel\n            checked={internalSwitchChecked}\n            hint={hint}\n            hintId={hintId}\n            isFullWidth={isFullWidth}\n            label={label}\n          />\n        }\n        labelPlacement=\"start\"\n        sx={{\n          justifyContent: \"space-between\",\n          alignItems: \"flex-start\",\n          gap: odysseyDesignTokens.Spacing4,\n          width: \"100%\",\n          maxWidth: isFullWidth\n            ? \"100%\"\n            : odysseyDesignTokens.TypographyLineLengthMax,\n        }}\n        value={value}\n      />\n    </Box>\n  );\n};\n\nconst MemoizedSwitch = memo(Switch);\nMemoizedSwitch.displayName = \"Switch\";\n\nexport { MemoizedSwitch as Switch };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,IAAI,EAEJC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AAOd,MAAM;EAAEC;AAAW,CAAC,GAAGC,wBAAwB;AAAC,SACvCC,sBAAsB;AAAA,SACtBC,GAAG;AAAA,SAEHC,SAAS;AAAA,SAETC,WAAW;AAAA,SACXJ,wBAAwB,EAAEK,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAwClD,MAAMC,WAAW,GAAGC,IAAA,IAMI;EAAA,IANH;IACnBC,OAAO;IACPC,IAAI;IACJC,MAAM;IACNC,WAAW;IACXC;EACgB,CAAC,GAAAL,IAAA;EACjB,MAAMM,mBAAmB,GAAGlB,sBAAsB,CAAC,CAAC;EAEpD,OACEQ,KAAA,CAAAE,SAAA;IAAAS,QAAA,GACEX,KAAA,CAACP,GAAG;MACFmB,EAAE,EAAE;QACFC,OAAO,EAAE,MAAM;QACfC,UAAU,EAAE,QAAQ;QACpBC,QAAQ,EAAE,MAAM;QAChBC,GAAG,EAAEN,mBAAmB,CAACO,QAAQ;QACjCC,MAAM,EAAE,CAAC;QACTC,QAAQ,EAAEX,WAAW,GACjB,MAAM,GACNE,mBAAmB,CAACU,uBAAuB;QAC/CC,UAAU,EAAEX,mBAAmB,CAACY;MAClC,CAAE;MAAAX,QAAA,GAEDF,KAAK,EACNX,IAAA,CAACL,GAAG;QACFmB,EAAE,EAAE;UACFW,OAAO,EAAE,SAAS;UAClBC,eAAe,EAAEnB,OAAO,GACpBK,mBAAmB,CAACe,qBAAqB,GACzCf,mBAAmB,CAACgB,aAAa;UACrCC,YAAY,EAAEjB,mBAAmB,CAACkB,gBAAgB;UAClDC,KAAK,EAAExB,OAAO,GACVK,mBAAmB,CAACoB,kBAAkB,GACtCpB,mBAAmB,CAACqB,aAAa;UACrCV,UAAU,EAAEX,mBAAmB,CAACY,wBAAwB;UACxDU,QAAQ,EAAEtB,mBAAmB,CAACuB,gBAAgB;UAC9CC,UAAU,EAAExB,mBAAmB,CAACyB,4BAA4B;UAC5DC,kBAAkB,EAAE,yBAAyB;UAC7CC,kBAAkB,EAAE3B,mBAAmB,CAAC4B;QAC1C,CAAE;QAAA3B,QAAA,EAEDN,OAAO,GAAG,QAAQ,GAAG;MAAU,CAC7B,CAAC;IAAA,CACH,CAAC,EACLC,IAAI,IAAIR,IAAA,CAACJ,SAAS;MAAC6C,EAAE,EAAEhC,MAAO;MAACiC,IAAI,EAAElC;IAAK,CAAE,CAAC;EAAA,CAC9C,CAAC;AAEP,CAAC;AAED,MAAMmC,MAAM,GAAGC,KAAA,IAYI;EAAA,IAZH;IACdpC,IAAI;IACJiC,EAAE,EAAEI,GAAG;IACPC,SAAS;IACTC,gBAAgB;IAChBC,UAAU;IACVtC,WAAW,GAAG,KAAK;IACnBC,KAAK;IACLsC,IAAI,EAAEC,KAAK;IACXC,QAAQ;IACRC,MAAM;IACNC,KAAK,GAAG;EACG,CAAC,GAAAT,KAAA;EACZ,MAAMhC,mBAAmB,GAAGlB,sBAAsB,CAAC,CAAC;EACpD,MAAM4D,kBAAkB,GAAGhE,MAAM,CAC/BQ,eAAe,CAAC;IACdyD,eAAe,EAAET,SAAS;IAC1BU,iBAAiB,EAAET;EACrB,CAAC,CACH,CAAC;EACD,MAAMU,WAAW,GAAGpE,OAAO,CAAC,MAAM;IAChC,IAAIiE,kBAAkB,CAACI,OAAO,KAAKlE,UAAU,EAAE;MAC7C,OAAO;QAAEe,OAAO,EAAEuC;MAAU,CAAC;IAC/B;IACA,OAAO;MAAEa,cAAc,EAAEZ;IAAiB,CAAC;EAC7C,CAAC,EAAE,CAACA,gBAAgB,EAAED,SAAS,CAAC,CAAC;EAEjC,MAAM,CAACc,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGtE,QAAQ,CAChE+D,kBAAkB,CAACI,OAAO,KAAKlE,UAAU,GACrCsE,OAAO,CAAChB,SAAS,CAAC,GAClBgB,OAAO,CAACf,gBAAgB,CAC9B,CAAC;EAED3D,SAAS,CAAC,MAAM;IACd,IAAIkE,kBAAkB,CAACI,OAAO,KAAKlE,UAAU,EAAE;MAC7CqE,wBAAwB,CAACC,OAAO,CAAChB,SAAS,CAAC,CAAC;IAC9C;EACF,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,MAAML,EAAE,GAAG5C,WAAW,CAACgD,GAAG,CAAC;EAE3B,MAAMpC,MAAM,GAAGD,IAAI,GAAI,GAAEiC,EAAG,OAAM,GAAGsB,SAAS;EAC9C,MAAMC,cAAc,GAAI,GAAEvB,EAAG,QAAO;EAEpC,MAAMwB,cAAc,GAAG9E,WAAW,CAChC,CAAC+E,CAAiC,EAAE3D,OAAgB,KAAK;IACvDsD,wBAAwB,CAACtD,OAAO,CAAC;IACjC4C,QAAQ,GAAG;MAAE5C,OAAO;MAAE8C;IAAM,CAAC,CAAC;EAChC,CAAC,EACD,CAACF,QAAQ,EAAEU,wBAAwB,EAAER,KAAK,CAC5C,CAAC;EAED,MAAMc,qBAAqB,GAAG9E,OAAO,CACnC,MACEW,IAAA,CAAAoE,OAAA;IAAA,GACMX,WAAW;IACfY,QAAQ,EAAErB,UAAW;IACrBsB,aAAa;IACbC,UAAU,EAAE;MACV,cAAc,EAAEX,qBAAqB;MACrC,kBAAkB,EAAEnD,MAAM;MAC1B,YAAY,EAAEE,KAAK;MACnB,iBAAiB,EAAEqD;IACrB,CAAE;IACFf,IAAI,EAAEC,KAAK,IAAIT,EAAG;IAClBU,QAAQ,EAAEc;EAAe,CAC1B,CACF,EACD,CACEA,cAAc,EACdxD,MAAM,EACNgD,WAAW,EACXG,qBAAqB,EACrBnB,EAAE,EACFO,UAAU,EACVrC,KAAK,EACLqD,cAAc,EACdd,KAAK,CAET,CAAC;EAED,OACElD,IAAA,CAACL,GAAG;IACFmB,EAAE,EAAE;MACF0D,cAAc,EAAE5D,mBAAmB,CAAC6D;IACtC,CAAE;IAAA5D,QAAA,EAEFb,IAAA,CAAA0E,iBAAA;MACEnE,OAAO,EAAEqD,qBAAsB;MAC/Be,OAAO,EAAER,qBAAsB;MAC/B,WAASf,MAAO;MAChBiB,QAAQ,EAAErB,UAAW;MACrBP,EAAE,EAAEuB,cAAe;MACnBrD,KAAK,EACHX,IAAA,CAACK,WAAW;QACVE,OAAO,EAAEqD,qBAAsB;QAC/BpD,IAAI,EAAEA,IAAK;QACXC,MAAM,EAAEA,MAAO;QACfC,WAAW,EAAEA,WAAY;QACzBC,KAAK,EAAEA;MAAM,CACd,CACF;MACDiE,cAAc,EAAC,OAAO;MACtB9D,EAAE,EAAE;QACF+D,cAAc,EAAE,eAAe;QAC/B7D,UAAU,EAAE,YAAY;QACxBE,GAAG,EAAEN,mBAAmB,CAACkE,QAAQ;QACjCC,KAAK,EAAE,MAAM;QACb1D,QAAQ,EAAEX,WAAW,GACjB,MAAM,GACNE,mBAAmB,CAACU;MAC1B,CAAE;MACF+B,KAAK,EAAEA;IAAM,CACd;EAAC,CACC,CAAC;AAEV,CAAC;AAED,MAAM2B,cAAc,GAAG9F,IAAI,CAACyD,MAAM,CAAC;AACnCqC,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIrC,MAAM"}

package/dist/labs/index.js

@@ -22,4 +22,5 @@ export * from "./StaticTable.js";
 export * from "./PaginatedTable.js";
 export * from "./GroupPicker.js";
 export * from "./VirtualizedAutocomplete.js";
+export * from "./Switch.js";
 //# sourceMappingURL=index.js.map

package/dist/labs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AdapterDateFns","LocalizationProvider"],"sources":["../../src/labs/index.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\nexport { AdapterDateFns } from \"@mui/x-date-pickers/AdapterDateFns\";\nexport { LocalizationProvider } from \"@mui/x-date-pickers\";\nexport type { LocalizationProviderProps } from \"@mui/x-date-pickers\";\n\nexport * from \"./DatePicker\";\nexport * from \"./datePickerTheme\";\n\nexport * from \"./DataTable\";\nexport * from \"./DataTablePagination\";\nexport * from \"./DataFilters\";\n\nexport * from \"./materialReactTableTypes\";\nexport * from \"./StaticTable\";\nexport * from \"./PaginatedTable\";\n\nexport * from \"./GroupPicker\";\nexport * from \"./VirtualizedAutocomplete\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,oCAAoC;AACnE,SAASC,oBAAoB,QAAQ,qBAAqB;AAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"index.js","names":["AdapterDateFns","LocalizationProvider"],"sources":["../../src/labs/index.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\nexport { AdapterDateFns } from \"@mui/x-date-pickers/AdapterDateFns\";\nexport { LocalizationProvider } from \"@mui/x-date-pickers\";\nexport type { LocalizationProviderProps } from \"@mui/x-date-pickers\";\n\nexport * from \"./DatePicker\";\nexport * from \"./datePickerTheme\";\n\nexport * from \"./DataTable\";\nexport * from \"./DataTablePagination\";\nexport * from \"./DataFilters\";\n\nexport * from \"./materialReactTableTypes\";\nexport * from \"./StaticTable\";\nexport * from \"./PaginatedTable\";\n\nexport * from \"./GroupPicker\";\nexport * from \"./VirtualizedAutocomplete\";\n\nexport * from \"./Switch\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,oCAAoC;AACnE,SAASC,oBAAoB,QAAQ,qBAAqB;AAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/src/index.d.ts

@@ -75,6 +75,7 @@ export * from "./TextField";
 export * from "./theme";
 export * from "./Toast";
 export * from "./ToastStack";
+export * from "./labs/Switch";
 export * from "./Tooltip";
 export * from "./Typography";
 export * from "./useUniqueId";

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvD,OAAO,EACL,WAAW;AACX,4FAA4F;AAC5F,iBAAiB;AACjB,4FAA4F;AAC5F,OAAO;AACP,4FAA4F;AAC5F,cAAc;AACd,4FAA4F;AAC5F,SAAS;AACT,4FAA4F;AAC5F,YAAY;AACZ,4FAA4F;AAC5F,YAAY;AACZ,4FAA4F;AAC5F,aAAa;AACb,4FAA4F;AAC5F,QAAQ;AACR,4FAA4F;AAC5F,KAAK;AACL,4FAA4F;AAC5F,iBAAiB,EACjB,aAAa,GACd,MAAM,eAAe,CAAC;AAEvB,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,sBAAsB,EACtB,YAAY,GACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvD,OAAO,EACL,WAAW;AACX,4FAA4F;AAC5F,iBAAiB;AACjB,4FAA4F;AAC5F,OAAO;AACP,4FAA4F;AAC5F,cAAc;AACd,4FAA4F;AAC5F,SAAS;AACT,4FAA4F;AAC5F,YAAY;AACZ,4FAA4F;AAC5F,YAAY;AACZ,4FAA4F;AAC5F,aAAa;AACb,4FAA4F;AAC5F,QAAQ;AACR,4FAA4F;AAC5F,KAAK;AACL,4FAA4F;AAC5F,iBAAiB,EACjB,aAAa,GACd,MAAM,eAAe,CAAC;AAEvB,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,sBAAsB,EACtB,YAAY,GACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/dist/src/labs/Switch.d.ts

@@ -0,0 +1,41 @@
+/*!
+ * 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.
+ */
+/// <reference types="react" />
+import { SwitchProps as MuiSwitchProps } from "@mui/material";
+import { FieldComponentProps } from "../FieldComponentProps";
+import type { SeleniumProps } from "../SeleniumProps";
+import { CheckedFieldProps } from "../FormCheckedProps";
+type OnChangeCallbackArguments = {
+    checked: boolean;
+    value: string;
+};
+export type SwitchProps = {
+    /**
+     * if `true`, the label and switch span entire containing element's width
+     */
+    isFullWidth?: boolean;
+    /**
+     * The label text for the Switch
+     */
+    label: string;
+    /**
+     * The change event handler for the Switch
+     */
+    onChange?: ({ checked, value }: OnChangeCallbackArguments) => void;
+    /**
+     * The value attribute of the Switch
+     */
+    value: string;
+} & Pick<FieldComponentProps, "hint" | "id" | "isFullWidth" | "isDisabled" | "name"> & CheckedFieldProps<MuiSwitchProps> & SeleniumProps;
+declare const MemoizedSwitch: import("react").MemoExoticComponent<({ hint, id: _id, isChecked, isDefaultChecked, isDisabled, isFullWidth, label, name: _name, onChange, testId, value, }: SwitchProps) => JSX.Element>;
+export { MemoizedSwitch as Switch };
+//# sourceMappingURL=Switch.d.ts.map

package/dist/src/labs/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/labs/Switch.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAWH,OAAO,EAEL,WAAW,IAAI,cAAc,EAE9B,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,KAAK,yBAAyB,GAAG;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACnE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CACN,mBAAmB,EACnB,MAAM,GAAG,IAAI,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,CACtD,GACC,iBAAiB,CAAC,cAAc,CAAC,GACjC,aAAa,CAAC;AAkLhB,QAAA,MAAM,cAAc,8JA1GjB,WAAW,iBA0GqB,CAAC;AAGpC,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,CAAC"}

package/dist/src/labs/index.d.ts

@@ -22,4 +22,5 @@ export * from "./StaticTable";
 export * from "./PaginatedTable";
 export * from "./GroupPicker";
 export * from "./VirtualizedAutocomplete";
+export * from "./Switch";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/labs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/labs/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAElC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAE9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AAEjC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/labs/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAElC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAE9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AAEjC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAE1C,cAAc,UAAU,CAAC"}

package/dist/src/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAoC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;mBAIN,YAAY;;MAEzB,YAAY,CAAC,YAAY,CA4iF5B,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAoC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;mBAIN,YAAY;;MAEzB,YAAY,CAAC,YAAY,CAomF5B,CAAC"}

package/dist/theme/components.js

@@ -1237,6 +1237,65 @@ export const components = _ref => {
         }
       }
     },
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          position: "relative",
+          padding: `${odysseyTokens.Spacing0} 0`,
+          width: odysseyTokens.Spacing7,
+          height: odysseyTokens.Spacing5,
+          overflow: "visible"
+        },
+        switchBase: _ref17 => {
+          let {
+            ownerState
+          } = _ref17;
+          return {
+            top: odysseyTokens.Spacing1,
+            left: odysseyTokens.Spacing1,
+            padding: `${odysseyTokens.Spacing0} 0`,
+            ...(ownerState.checked === true && {
+              color: `${odysseyTokens.HueNeutralWhite} !important`,
+              transform: `translateX(${odysseyTokens.Spacing4}) !important`
+            }),
+            "&:hover": {
+              backgroundColor: "transparent",
+              ...(ownerState.checked === true && {
+                backgroundColor: "transparent !important"
+              })
+            },
+            "&.Mui-focusVisible": {
+              " + .MuiSwitch-track": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`
+              }
+            }
+          };
+        },
+        thumb: {
+          width: odysseyTokens.Spacing4,
+          height: odysseyTokens.Spacing4,
+          boxShadow: "none"
+        },
+        track: _ref18 => {
+          let {
+            ownerState
+          } = _ref18;
+          return {
+            borderRadius: odysseyTokens.BorderRadiusRound,
+            backgroundColor: `${odysseyTokens.HueNeutral300}`,
+            opacity: 1,
+            ...(ownerState.checked === true && {
+              opacity: "1 !important",
+              backgroundColor: `${odysseyTokens.PaletteSuccessLight} !important`
+            })
+          };
+        },
+        input: {
+          height: "44px",
+          top: "-14px"
+        }
+      }
+    },
     MuiDialog: {
       defaultProps: {
         scroll: "paper"
@@ -1266,10 +1325,10 @@ export const components = _ref => {
     },
     MuiDialogContent: {
       styleOverrides: {
-        root: _ref17 => {
+        root: _ref19 => {
           let {
             ownerState
-          } = _ref17;
+          } = _ref19;
           return {
             paddingBlock: 0,
             paddingInline: odysseyTokens.Spacing6,
@@ -1322,10 +1381,10 @@ export const components = _ref => {
         margin: "normal"
       },
       styleOverrides: {
-        root: _ref18 => {
+        root: _ref20 => {
           let {
             ownerState
-          } = _ref18;
+          } = _ref20;
           return {
             width: "100%",
             maxWidth: odysseyTokens.TypographyLineLengthMax,
@@ -1355,10 +1414,10 @@ export const components = _ref => {
     },
     MuiFormControlLabel: {
       styleOverrides: {
-        root: _ref19 => {
+        root: _ref21 => {
           let {
             ownerState
-          } = _ref19;
+          } = _ref21;
           return {
             gap: odysseyTokens.Spacing2,
             marginInlineStart: 0,
@@ -1473,10 +1532,10 @@ export const components = _ref => {
     },
     MuiInputAdornment: {
       styleOverrides: {
-        root: _ref20 => {
+        root: _ref22 => {
           let {
             ownerState
-          } = _ref20;
+          } = _ref22;
           return {
             display: "flex",
             minWidth: "1.25em",
@@ -1503,11 +1562,11 @@ export const components = _ref => {
         minRows: 3
       },
       styleOverrides: {
-        root: _ref21 => {
+        root: _ref23 => {
           let {
             ownerState,
             theme
-          } = _ref21;
+          } = _ref23;
           return {
             ...theme.typography.body1,
             flex: "1",
@@ -1598,10 +1657,10 @@ export const components = _ref => {
         shrink: false
       },
       styleOverrides: {
-        root: _ref22 => {
+        root: _ref24 => {
           let {
             ownerState
-          } = _ref22;
+          } = _ref24;
           return {
             display: "flex",
             justifyContent: "space-between",
@@ -1730,10 +1789,10 @@ export const components = _ref => {
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: _ref23 => {
+        root: _ref25 => {
           let {
             ownerState
-          } = _ref23;
+          } = _ref25;
           return {
             gap: odysseyTokens.Spacing2,
             minHeight: "unset",
@@ -1856,10 +1915,10 @@ export const components = _ref => {
         checkedIcon: _jsx(_Fragment, {})
       },
       styleOverrides: {
-        root: _ref24 => {
+        root: _ref26 => {
           let {
             theme
-          } = _ref24;
+          } = _ref26;
           return {
             width: `${odysseyTokens.TypographyLineHeightUi}em`,
             height: `${odysseyTokens.TypographyLineHeightUi}em`,
@@ -1982,10 +2041,10 @@ export const components = _ref => {
         color: "inherit"
       },
       styleOverrides: {
-        root: _ref25 => {
+        root: _ref27 => {
           let {
             ownerState
-          } = _ref25;
+          } = _ref27;
           return {
             fontSize: `${odysseyTokens.TypographyLineHeightUi}rem`,
             ...(ownerState.fontSize === "small" && {
@@ -2003,10 +2062,10 @@ export const components = _ref => {
         iconPosition: "start"
       },
       styleOverrides: {
-        root: _ref26 => {
+        root: _ref28 => {
           let {
             ownerState
-          } = _ref26;
+          } = _ref28;
           return {
             maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
             minWidth: "unset",
@@ -2076,10 +2135,10 @@ export const components = _ref => {
     },
     MuiTable: {
       styleOverrides: {
-        root: _ref27 => {
+        root: _ref29 => {
           let {
             ownerState
-          } = _ref27;
+          } = _ref29;
           return {
             display: "table",
             width: "auto",
@@ -2113,11 +2172,11 @@ export const components = _ref => {
     },
     MuiTableCell: {
       styleOverrides: {
-        root: _ref28 => {
+        root: _ref30 => {
           let {
             theme,
             ownerState
-          } = _ref28;
+          } = _ref30;
           return {
             ...theme.typography.body1,
             borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
@@ -2333,10 +2392,10 @@ export const components = _ref => {
             color: odysseyTokens.TypographyColorBody
           }
         },
-        icon: _ref29 => {
+        icon: _ref31 => {
           let {
             ownerState
-          } = _ref29;
+          } = _ref31;
           return {
             ...(ownerState.direction === "asc" && {
               transform: "rotate(180deg) !important"
@@ -2365,10 +2424,10 @@ export const components = _ref => {
         placement: "top"
       },
       styleOverrides: {
-        tooltip: _ref30 => {
+        tooltip: _ref32 => {
           let {
             ownerState
-          } = _ref30;
+          } = _ref32;
           return {
             maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
             paddingBlock: odysseyTokens.Spacing2,