@okta/odyssey-react-mui 0.16.1 → 0.17.0

package/dist/theme/components.js

@@ -9,6 +9,7 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
 import { inputBaseClasses } from "@mui/material/InputBase";
 import { tableBodyClasses } from "@mui/material/TableBody";
@@ -17,7 +18,7 @@ import { tableHeadClasses } from "@mui/material/TableHead";
 import { tableRowClasses } from "@mui/material/TableRow";
 import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
 import { tooltipClasses } from "@mui/material/Tooltip";
-import { AlertTriangleFilledIcon, ArrowDownIcon, CheckCircleFilledIcon, InformationCircleFilledIcon } from "../iconDictionary/index.js";
+import { AlertTriangleFilledIcon, ArrowDownIcon, CheckCircleFilledIcon, CloseCircleFilledIcon, InformationCircleFilledIcon } from "../iconDictionary/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const components = {
   MuiAlert: {
@@ -339,7 +340,7 @@ export const components = {
           fontWeight: 600,
           minWidth: "unset",
           padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
-          display: "inline-block",
+          display: "inline-flex",
           position: "relative",
           marginBlock: "0",
           marginInline: "0",
@@ -367,9 +368,19 @@ export const components = {
             pointerEvents: "inherit"
           },
           ".MuiButton-startIcon > *:nth-of-type(1)": {
-            fontSize: "inherit"
+            fontSize: "1.14285714em"
           }
         };
+      },
+      startIcon: _ref14 => {
+        let {
+          theme
+        } = _ref14;
+        return {
+          display: "inline-flex",
+          margin: 0,
+          marginInlineEnd: theme.spacing(2)
+        };
       }
     }
   },
@@ -390,10 +401,10 @@ export const components = {
       size: "small"
     },
     styleOverrides: {
-      root: _ref14 => {
+      root: _ref15 => {
         let {
           theme
-        } = _ref14;
+        } = _ref15;
         return {
           borderRadius: "4px",
           "&:hover": {
@@ -421,6 +432,67 @@ export const components = {
       }
     }
   },
+  MuiChip: {
+    defaultProps: {
+      deleteIcon: _jsx(CloseCircleFilledIcon, {})
+    },
+    styleOverrides: {
+      root: _ref16 => {
+        let {
+          theme,
+          ownerState
+        } = _ref16;
+        return {
+          height: "auto",
+          paddingBlock: theme.spacing(2),
+          paddingInline: theme.spacing(3),
+          fontSize: theme.typography.body1.fontSize,
+          lineHeight: "1.14285714",
+          borderRadius: "1.5em",
+          backgroundColor: theme.palette.grey[100],
+          ...(ownerState.onDelete && {
+            paddingInlineEnd: theme.spacing(2)
+          }),
+          [`& .${chipClasses.deleteIcon}`]: {
+            WebkitTapHighlightColor: "transparent",
+            color: theme.palette.text.secondary,
+            fontSize: "1em",
+            cursor: "pointer",
+            margin: "0",
+            marginInlineStart: theme.spacing(2),
+            "&:hover": {
+              color: theme.palette.text.primary
+            }
+          },
+          [`&.${chipClasses.disabled}`]: {
+            opacity: 1,
+            pointerEvents: "none",
+            backgroundColor: theme.palette.grey[50],
+            color: theme.palette.text.secondary
+          },
+          ...(ownerState.clickable && {
+            "&:hover": {
+              backgroundColor: theme.palette.grey[200]
+            },
+            [`&.${chipClasses.focusVisible}`]: {
+              backgroundColor: theme.palette.grey[200],
+              outlineColor: theme.palette.primary.main,
+              outlineOffset: "2px",
+              outlineStyle: "solid",
+              outlineWidth: "2px"
+            },
+            "&:active": {
+              boxShadow: "none",
+              backgroundColor: theme.palette.grey[300]
+            }
+          })
+        };
+      },
+      label: {
+        padding: 0
+      }
+    }
+  },
   MuiCircularProgress: {
     defaultProps: {
       size: "1.14285714rem",
@@ -430,20 +502,20 @@ export const components = {
       variant: "indeterminate"
     },
     styleOverrides: {
-      root: _ref15 => {
+      root: _ref17 => {
         let {
           theme,
           ownerState
-        } = _ref15;
+        } = _ref17;
         return { ...(ownerState.color !== "inherit" && {
             color: theme.palette.primary.dark
           })
         };
       },
-      circle: _ref16 => {
+      circle: _ref18 => {
         let {
           ownerState
-        } = _ref16;
+        } = _ref18;
         return { ...(ownerState.variant === "indeterminate" && {
             strokeDasharray: "160%, 360%"
           })
@@ -456,10 +528,10 @@ export const components = {
       scroll: "paper"
     },
     styleOverrides: {
-      paper: _ref17 => {
+      paper: _ref19 => {
         let {
           theme
-        } = _ref17;
+        } = _ref19;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing(6)} * 2))`,
           boxShadow: "none",
@@ -470,10 +542,10 @@ export const components = {
   },
   MuiDialogActions: {
     styleOverrides: {
-      root: _ref18 => {
+      root: _ref20 => {
         let {
           theme
-        } = _ref18;
+        } = _ref20;
         return {
           paddingBlockStart: theme.spacing(4),
           paddingBlockEnd: theme.spacing(6),
@@ -484,11 +556,11 @@ export const components = {
   },
   MuiDialogContent: {
     styleOverrides: {
-      root: _ref19 => {
+      root: _ref21 => {
         let {
           theme,
           ownerState
-        } = _ref19;
+        } = _ref21;
         return {
           padding: 0,
           paddingBlock: theme.spacing(4),
@@ -507,10 +579,10 @@ export const components = {
       color: "text.primary"
     },
     styleOverrides: {
-      root: _ref20 => {
+      root: _ref22 => {
         let {
           theme
-        } = _ref20;
+        } = _ref22;
         return {
           marginBlockEnd: theme.spacing(5),
           "&:last-child": {
@@ -526,10 +598,10 @@ export const components = {
       variant: "h5"
     },
     styleOverrides: {
-      root: _ref21 => {
+      root: _ref23 => {
         let {
           theme
-        } = _ref21;
+        } = _ref23;
         return {
           display: "flex",
           justifyContent: "space-between",
@@ -548,11 +620,11 @@ export const components = {
       margin: "normal"
     },
     styleOverrides: {
-      root: _ref22 => {
+      root: _ref24 => {
         let {
           ownerState,
           theme
-        } = _ref22;
+        } = _ref24;
         return {
           width: "100%",
           maxWidth: "32rem",
@@ -579,11 +651,11 @@ export const components = {
   },
   MuiFormControlLabel: {
     styleOverrides: {
-      root: _ref23 => {
+      root: _ref25 => {
         let {
           theme,
           ownerState
-        } = _ref23;
+        } = _ref25;
         return {
           gap: theme.spacing(2),
           marginLeft: 0,
@@ -625,10 +697,10 @@ export const components = {
       variant: "standard"
     },
     styleOverrides: {
-      root: _ref24 => {
+      root: _ref26 => {
         let {
           theme
-        } = _ref24;
+        } = _ref26;
         return {
           fontSize: theme.typography.subtitle1.fontSize,
           lineHeight: "1.33333333",
@@ -647,10 +719,10 @@ export const components = {
   },
   MuiFormLabel: {
     styleOverrides: {
-      root: _ref25 => {
+      root: _ref27 => {
         let {
           theme
-        } = _ref25;
+        } = _ref27;
         return {
           color: theme.palette.text.primary,
           lineHeight: "1.14285714",
@@ -666,10 +738,10 @@ export const components = {
   },
   MuiIconButton: {
     styleOverrides: {
-      root: _ref26 => {
+      root: _ref28 => {
         let {
           theme
-        } = _ref26;
+        } = _ref28;
         return {
           padding: theme.spacing(1),
           fontSize: theme.typography.body1.fontSize,
@@ -714,11 +786,11 @@ export const components = {
       variant: "outlined"
     },
     styleOverrides: {
-      root: _ref27 => {
+      root: _ref29 => {
         let {
           theme,
           ownerState
-        } = _ref27;
+        } = _ref29;
         return {
           display: "flex",
           minWidth: "1em",
@@ -745,11 +817,11 @@ export const components = {
       required: true
     },
     styleOverrides: {
-      root: _ref28 => {
+      root: _ref30 => {
         let {
           ownerState,
           theme
-        } = _ref28;
+        } = _ref30;
         return { ...theme.typography.body1,
           flex: "1",
           width: "auto",
@@ -804,10 +876,10 @@ export const components = {
           }
         };
       },
-      input: _ref29 => {
+      input: _ref31 => {
         let {
           theme
-        } = _ref29;
+        } = _ref31;
         return {
           boxSizing: "border-box",
           height: "auto",
@@ -833,10 +905,10 @@ export const components = {
       shrink: false
     },
     styleOverrides: {
-      root: _ref30 => {
+      root: _ref32 => {
         let {
           ownerState
-        } = _ref30;
+        } = _ref32;
         return {
           display: "flex",
           justifyContent: "space-between",
@@ -858,10 +930,10 @@ export const components = {
   },
   MuiLink: {
     styleOverrides: {
-      root: _ref31 => {
+      root: _ref33 => {
         let {
           theme
-        } = _ref31;
+        } = _ref33;
         return {
           color: theme.palette.primary.main,
           textDecoration: "none",
@@ -904,10 +976,10 @@ export const components = {
       props: {
         variant: "monochrome"
       },
-      style: _ref32 => {
+      style: _ref34 => {
         let {
           theme
-        } = _ref32;
+        } = _ref34;
         return {
           color: theme.palette.text.primary,
           textDecoration: "underline",
@@ -932,10 +1004,10 @@ export const components = {
       variant: "standard"
     },
     styleOverrides: {
-      icon: _ref33 => {
+      icon: _ref35 => {
         let {
           theme
-        } = _ref33;
+        } = _ref35;
         return {
           color: theme.palette.text.primary
         };
@@ -947,10 +1019,10 @@ export const components = {
       size: "small"
     },
     styleOverrides: {
-      root: _ref34 => {
+      root: _ref36 => {
         let {
           theme
-        } = _ref34;
+        } = _ref36;
         return {
           "&:hover": {
             backgroundColor: "transparent"
@@ -985,10 +1057,10 @@ export const components = {
       variant: "standard"
     },
     styleOverrides: {
-      icon: _ref35 => {
+      icon: _ref37 => {
         let {
           theme
-        } = _ref35;
+        } = _ref37;
         return {
           color: theme.palette.text.primary
         };
@@ -1006,11 +1078,11 @@ export const components = {
       iconPosition: "start"
     },
     styleOverrides: {
-      root: _ref36 => {
+      root: _ref38 => {
         let {
           theme,
           ownerState
-        } = _ref36;
+        } = _ref38;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           minWidth: "unset",
@@ -1071,11 +1143,11 @@ export const components = {
   },
   MuiTable: {
     styleOverrides: {
-      root: _ref37 => {
+      root: _ref39 => {
         let {
           theme,
           ownerState
-        } = _ref37;
+        } = _ref39;
         return {
           display: "table",
           width: "auto",
@@ -1098,11 +1170,11 @@ export const components = {
   },
   MuiTableCell: {
     styleOverrides: {
-      root: _ref38 => {
+      root: _ref40 => {
         let {
           theme,
           ownerState
-        } = _ref38;
+        } = _ref40;
         return { ...theme.typography.body1,
           maxWidth: theme.mixins.maxWidth,
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
@@ -1178,10 +1250,10 @@ export const components = {
   },
   MuiTableContainer: {
     styleOverrides: {
-      root: _ref39 => {
+      root: _ref41 => {
         let {
           theme
-        } = _ref39;
+        } = _ref41;
         return {
           width: "unset",
           maxWidth: "100%",
@@ -1198,10 +1270,10 @@ export const components = {
   },
   MuiTableRow: {
     styleOverrides: {
-      root: _ref40 => {
+      root: _ref42 => {
         let {
           theme
-        } = _ref40;
+        } = _ref42;
         return {
           verticalAlign: "unset",
           [`&.${tableRowClasses.root}:hover`]: {
@@ -1222,10 +1294,10 @@ export const components = {
       IconComponent: ArrowDownIcon
     },
     styleOverrides: {
-      root: _ref41 => {
+      root: _ref43 => {
         let {
           theme
-        } = _ref41;
+        } = _ref43;
         return {
           cursor: "pointer",
           display: "inline-flex",
@@ -1254,11 +1326,11 @@ export const components = {
           }
         };
       },
-      icon: _ref42 => {
+      icon: _ref44 => {
         let {
           theme,
           ownerState
-        } = _ref42;
+        } = _ref44;
         return {
           fontSize: "inherit",
           marginRight: 0,
@@ -1287,19 +1359,19 @@ export const components = {
   },
   MuiTabs: {
     styleOverrides: {
-      root: _ref43 => {
+      root: _ref45 => {
         let {
           theme
-        } = _ref43;
+        } = _ref45;
         return {
           minHeight: "unset",
           marginBottom: theme.spacing(5)
         };
       },
-      flexContainer: _ref44 => {
+      flexContainer: _ref46 => {
         let {
           theme
-        } = _ref44;
+        } = _ref46;
         return {
           gap: theme.spacing(5),
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`
@@ -1315,11 +1387,11 @@ export const components = {
       placement: "top"
     },
     styleOverrides: {
-      tooltip: _ref45 => {
+      tooltip: _ref47 => {
         let {
           theme,
           ownerState
-        } = _ref45;
+        } = _ref47;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           paddingBlock: theme.spacing(2),
@@ -1379,10 +1451,10 @@ export const components = {
           }
         };
       },
-      arrow: _ref46 => {
+      arrow: _ref48 => {
         let {
           theme
-        } = _ref46;
+        } = _ref48;
         return {
           color: theme.palette.grey[900],
           "&::before": {
@@ -1422,19 +1494,19 @@ export const components = {
       }
     },
     styleOverrides: {
-      paragraph: _ref47 => {
+      paragraph: _ref49 => {
         let {
           theme
-        } = _ref47;
+        } = _ref49;
         return {
           marginBottom: theme.spacing(4)
         };
       },
-      root: _ref48 => {
+      root: _ref50 => {
         let {
           theme,
           ownerState
-        } = _ref48;
+        } = _ref50;
         return { ...(ownerState.variant === "kbd" && {
             display: "inline-block",
             minWidth: `calc(${theme.typography.subtitle1.fontSize} * ${theme.typography.h5.lineHeight})`,