@okta/odyssey-react-mui 1.13.3 → 1.13.5

package/dist/labs/datePickerTheme.js

@@ -17,193 +17,139 @@ const odysseyTheme = createOdysseyMuiTheme({
   odysseyTokens
 });
 const dateStyles = {
-  default: _ref => {
-    let {
-      theme
-    } = _ref;
-    return {
-      color: theme.palette.text.primary
-    };
-  },
-  disabled: _ref2 => {
-    let {
-      theme
-    } = _ref2;
-    return {
-      backgroundColor: "transparent",
-      color: theme.palette.text.disabled
-    };
-  },
-  hover: _ref3 => {
-    let {
-      theme
-    } = _ref3;
-    return {
-      backgroundColor: theme.palette.grey[100]
-    };
-  },
-  hoverSelected: _ref4 => {
-    let {
-      theme
-    } = _ref4;
-    return {
-      backgroundColor: theme.palette.primary.dark,
-      color: theme.palette.primary.contrastText
-    };
-  },
-  outsideOfMonth: _ref5 => {
-    let {
-      theme
-    } = _ref5;
-    return {
-      backgroundColor: "transparent",
-      color: theme.palette.text.secondary
-    };
-  },
-  selected: _ref6 => {
-    let {
-      theme
-    } = _ref6;
-    return {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText
-    };
-  },
-  today: _ref7 => {
-    let {
-      theme
-    } = _ref7;
-    return {
-      backgroundColor: "transparent",
-      color: theme.palette.primary.main
-    };
-  }
+  default: ({
+    theme
+  }) => ({
+    color: theme.palette.text.primary
+  }),
+  disabled: ({
+    theme
+  }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.disabled
+  }),
+  hover: ({
+    theme
+  }) => ({
+    backgroundColor: theme.palette.grey[100]
+  }),
+  hoverSelected: ({
+    theme
+  }) => ({
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText
+  }),
+  outsideOfMonth: ({
+    theme
+  }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.secondary
+  }),
+  selected: ({
+    theme
+  }) => ({
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText
+  }),
+  today: ({
+    theme
+  }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.primary.main
+  })
 };
 const todayDotStyles = {
-  default: _ref8 => {
-    let {
-      theme
-    } = _ref8;
-    return {
-      backgroundColor: theme.palette.primary.main,
-      borderRadius: "50%",
-      bottom: theme.spacing(1),
-      content: '" "',
-      height: `${2 / theme.typography.fontSize}em`,
-      position: "absolute",
-      transform: "translateY(-50%)",
-      width: `${2 / theme.typography.fontSize}em`
-    };
-  },
-  hover: _ref9 => {
-    let {
-      theme
-    } = _ref9;
-    return {
-      backgroundColor: theme.palette.primary.main
-    };
-  },
-  selected: _ref10 => {
-    let {
-      theme
-    } = _ref10;
-    return {
-      backgroundColor: theme.palette.primary.contrastText
-    };
-  }
+  default: ({
+    theme
+  }) => ({
+    backgroundColor: theme.palette.primary.main,
+    borderRadius: "50%",
+    bottom: theme.spacing(1),
+    content: '" "',
+    height: `${2 / theme.typography.fontSize}em`,
+    position: "absolute",
+    transform: "translateY(-50%)",
+    width: `${2 / theme.typography.fontSize}em`
+  }),
+  hover: ({
+    theme
+  }) => ({
+    backgroundColor: theme.palette.primary.main
+  }),
+  selected: ({
+    theme
+  }) => ({
+    backgroundColor: theme.palette.primary.contrastText
+  })
 };
 const yearStyles = {
-  default: _ref11 => {
-    let {
-      theme
-    } = _ref11;
-    return {
-      backgroundColor: "transparent",
-      color: theme.palette.text.primary
-    };
-  },
-  disabled: _ref12 => {
-    let {
-      theme
-    } = _ref12;
-    return {
-      backgroundColor: "transparent",
-      color: theme.palette.text.disabled
-    };
-  },
-  hover: _ref13 => {
-    let {
-      theme
-    } = _ref13;
-    return {
-      backgroundColor: theme.palette.grey[100]
-    };
-  },
-  hoverSelected: _ref14 => {
-    let {
-      theme
-    } = _ref14;
-    return {
-      backgroundColor: theme.palette.primary.lighter,
-      color: theme.palette.primary.main
-    };
-  },
-  outsideOfMonth: _ref15 => {
-    let {
-      theme
-    } = _ref15;
-    return {
-      backgroundColor: "transparent",
-      color: theme.palette.text.secondary
-    };
-  },
-  selected: _ref16 => {
-    let {
-      theme
-    } = _ref16;
-    return {
-      backgroundColor: "transparent",
-      color: theme.palette.primary.main,
-      fontWeight: theme.typography.fontWeightBold
-    };
-  }
+  default: ({
+    theme
+  }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.primary
+  }),
+  disabled: ({
+    theme
+  }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.disabled
+  }),
+  hover: ({
+    theme
+  }) => ({
+    backgroundColor: theme.palette.grey[100]
+  }),
+  hoverSelected: ({
+    theme
+  }) => ({
+    backgroundColor: theme.palette.primary.lighter,
+    color: theme.palette.primary.main
+  }),
+  outsideOfMonth: ({
+    theme
+  }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.text.secondary
+  }),
+  selected: ({
+    theme
+  }) => ({
+    backgroundColor: "transparent",
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold
+  })
 };
 const yearCheckStyles = {
-  default: _ref17 => {
-    let {
-      theme
-    } = _ref17;
-    return {
-      backgroundColor: theme.palette.primary.main,
-      content: '""',
-      height: theme.typography.h6.fontSize,
-      maskImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M14.3536 4.35355L6.35355 12.3536C6.15829 12.5488 5.84171 12.5488 5.64645 12.3536L1.64645 8.35355L2.35355 7.64645L6 11.2929L13.6464 3.64645L14.3536 4.35355Z' fill='currentColor' /%3E%3C/svg%3E%0A\")",
-      maskPosition: "50% 50%",
-      maskRepeat: "no-repeat",
-      position: "absolute",
-      right: theme.spacing(4),
-      width: theme.typography.h6.fontSize
-    };
-  }
+  default: ({
+    theme
+  }) => ({
+    backgroundColor: theme.palette.primary.main,
+    content: '""',
+    height: theme.typography.h6.fontSize,
+    maskImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M14.3536 4.35355L6.35355 12.3536C6.15829 12.5488 5.84171 12.5488 5.64645 12.3536L1.64645 8.35355L2.35355 7.64645L6 11.2929L13.6464 3.64645L14.3536 4.35355Z' fill='currentColor' /%3E%3C/svg%3E%0A\")",
+    maskPosition: "50% 50%",
+    maskRepeat: "no-repeat",
+    position: "absolute",
+    right: theme.spacing(4),
+    width: theme.typography.h6.fontSize
+  })
 };
 export const datePickerTheme = {
   components: {
     MuiCalendarPicker: {
       styleOverrides: {
-        root: _ref18 => {
-          let {
-            theme
-          } = _ref18;
-          return {
-            borderColor: theme.palette.divider,
-            borderStyle: theme.mixins.borderStyle,
-            borderWidth: theme.mixins.borderWidth,
-            borderRadius: theme.mixins.borderRadius,
-            paddingBottom: theme.spacing(popupSpacingValue),
-            paddingTop: theme.spacing(4),
-            width: "100%"
-          };
-        }
+        root: ({
+          theme
+        }) => ({
+          borderColor: theme.palette.divider,
+          borderStyle: theme.mixins.borderStyle,
+          borderWidth: theme.mixins.borderWidth,
+          borderRadius: theme.mixins.borderRadius,
+          paddingBottom: theme.spacing(popupSpacingValue),
+          paddingTop: theme.spacing(4),
+          width: "100%"
+        })
       }
     },
     MuiCalendarOrClockPicker: {
@@ -231,54 +177,45 @@ export const datePickerTheme = {
     },
     MuiDayPicker: {
       styleOverrides: {
-        header: _ref19 => {
-          let {
-            theme
-          } = _ref19;
-          return {
-            gap: theme.spacing(1),
-            justifyContent: "space-between",
-            paddingLeft: theme.spacing(popupSpacingValue),
-            paddingRight: theme.spacing(popupSpacingValue)
-          };
-        },
+        header: ({
+          theme
+        }) => ({
+          gap: theme.spacing(1),
+          justifyContent: "space-between",
+          paddingLeft: theme.spacing(popupSpacingValue),
+          paddingRight: theme.spacing(popupSpacingValue)
+        }),
         slideTransition: () => ({
           minHeight: `${214 / 16 * (16 / 14)}rem`
         }),
-        weekContainer: _ref20 => {
-          let {
-            theme
-          } = _ref20;
-          return {
-            gap: theme.spacing(1),
-            justifyContent: "space-between",
-            marginBottom: theme.spacing(1),
-            marginLeft: 0,
-            marginRight: 0,
-            paddingLeft: theme.spacing(popupSpacingValue),
-            paddingRight: theme.spacing(popupSpacingValue),
-            "&:last-child": {
-              marginBottom: 0
-            }
-          };
-        },
-        weekDayLabel: _ref21 => {
-          let {
-            theme
-          } = _ref21;
-          return {
-            color: theme.palette.grey[900],
-            flexBasis: theme.spacing(6),
-            flexShrink: 0,
-            fontSize: theme.typography.subtitle1.fontSize,
-            fontWeight: theme.typography.fontWeightBold,
-            height: theme.spacing(6),
-            marginBottom: theme.spacing(2),
-            marginLeft: 0,
-            marginRight: 0,
-            width: theme.spacing(6)
-          };
-        }
+        weekContainer: ({
+          theme
+        }) => ({
+          gap: theme.spacing(1),
+          justifyContent: "space-between",
+          marginBottom: theme.spacing(1),
+          marginLeft: 0,
+          marginRight: 0,
+          paddingLeft: theme.spacing(popupSpacingValue),
+          paddingRight: theme.spacing(popupSpacingValue),
+          "&:last-child": {
+            marginBottom: 0
+          }
+        }),
+        weekDayLabel: ({
+          theme
+        }) => ({
+          color: theme.palette.grey[900],
+          flexBasis: theme.spacing(6),
+          flexShrink: 0,
+          fontSize: theme.typography.subtitle1.fontSize,
+          fontWeight: theme.typography.fontWeightBold,
+          height: theme.spacing(6),
+          marginBottom: theme.spacing(2),
+          marginLeft: 0,
+          marginRight: 0,
+          width: theme.spacing(6)
+        })
       }
     },
     MuiDatePicker: {
@@ -294,27 +231,21 @@ export const datePickerTheme = {
     },
     MuiPickersCalendarHeader: {
       styleOverrides: {
-        label: _ref22 => {
-          let {
-            theme
-          } = _ref22;
-          return {
-            fontSize: theme.typography.h6.fontSize,
-            fontWeight: theme.typography.fontWeightBold
-          };
-        },
-        root: _ref23 => {
-          let {
-            theme
-          } = _ref23;
-          return {
-            marginBottom: theme.spacing(1),
-            marginTop: 0,
-            paddingLeft: `calc(${theme.spacing(popupSpacingValue)} + ${theme.spacing(2)})`,
-            paddingRight: theme.spacing(popupSpacingValue),
-            width: "auto"
-          };
-        }
+        label: ({
+          theme
+        }) => ({
+          fontSize: theme.typography.h6.fontSize,
+          fontWeight: theme.typography.fontWeightBold
+        }),
+        root: ({
+          theme
+        }) => ({
+          marginBottom: theme.spacing(1),
+          marginTop: 0,
+          paddingLeft: `calc(${theme.spacing(popupSpacingValue)} + ${theme.spacing(2)})`,
+          paddingRight: theme.spacing(popupSpacingValue),
+          width: "auto"
+        })
       }
     },
     MuiPickersDay: {
@@ -323,134 +254,119 @@ export const datePickerTheme = {
           marginLeft: 0,
           marginRight: 0
         }),
-        root: _ref24 => {
-          let {
-            theme
-          } = _ref24;
-          return [dateStyles.default({
+        root: ({
+          theme
+        }) => [dateStyles.default({
+          theme
+        }), {
+          border: "none",
+          borderRadius: theme.mixins.borderRadius,
+          flexBasis: theme.spacing(6),
+          flexShrink: 0,
+          fontSize: theme.typography.body1.fontSize,
+          height: theme.spacing(6),
+          width: theme.spacing(6),
+          "&.MuiPickersDay-today": [dateStyles.today({
             theme
           }), {
-            border: "none",
-            borderRadius: theme.mixins.borderRadius,
-            flexBasis: theme.spacing(6),
-            flexShrink: 0,
-            fontSize: theme.typography.body1.fontSize,
-            height: theme.spacing(6),
-            width: theme.spacing(6),
-            "&.MuiPickersDay-today": [dateStyles.today({
-              theme
-            }), {
-              fontWeight: theme.typography.fontWeightBold
-            }],
-            "&.MuiPickersDay-today::after": todayDotStyles.default({
-              theme
-            }),
-            "&.MuiPickersDay-today.Mui-selected::after": todayDotStyles.selected({
-              theme
-            }),
-            "&.MuiPickersDay-dayOutsideMonth": dateStyles.outsideOfMonth({
-              theme
-            }),
-            "&:hover": dateStyles.hover({
-              theme
-            }),
-            "&:not(.Mui-selected)": {
-              border: "none"
-            },
-            "&.Mui-selected, &.Mui-selected:focus": dateStyles.selected({
-              theme
-            }),
-            "&.Mui-selected:hover": dateStyles.hoverSelected({
-              theme
-            }),
-            "&.Mui-disabled": dateStyles.disabled({
-              theme
-            })
-          }];
-        }
+            fontWeight: theme.typography.fontWeightBold
+          }],
+          "&.MuiPickersDay-today::after": todayDotStyles.default({
+            theme
+          }),
+          "&.MuiPickersDay-today.Mui-selected::after": todayDotStyles.selected({
+            theme
+          }),
+          "&.MuiPickersDay-dayOutsideMonth": dateStyles.outsideOfMonth({
+            theme
+          }),
+          "&:hover": dateStyles.hover({
+            theme
+          }),
+          "&:not(.Mui-selected)": {
+            border: "none"
+          },
+          "&.Mui-selected, &.Mui-selected:focus": dateStyles.selected({
+            theme
+          }),
+          "&.Mui-selected:hover": dateStyles.hoverSelected({
+            theme
+          }),
+          "&.Mui-disabled": dateStyles.disabled({
+            theme
+          })
+        }]
       }
     },
     MuiPickersPopper: {
       styleOverrides: {
-        paper: _ref25 => {
-          let {
-            theme
-          } = _ref25;
-          return {
-            boxShadow: `0 ${1 / 16 * (16 / 14)}rem ${4 / 16 * (16 / 14)}rem rgba(29, 29, 33, 0.08), 0 ${4 / 16 * (16 / 14)}rem ${10 / 16 * (16 / 14)}rem rgba(29, 29, 33, 0.08), 0 ${8 / 16 * (16 / 14)}rem ${30 / 16 * (16 / 14)}rem rgba(29, 29, 33, 0.1)`,
-            marginTop: theme.spacing(1)
-          };
-        }
+        paper: ({
+          theme
+        }) => ({
+          boxShadow: `0 ${1 / 16 * (16 / 14)}rem ${4 / 16 * (16 / 14)}rem rgba(29, 29, 33, 0.08), 0 ${4 / 16 * (16 / 14)}rem ${10 / 16 * (16 / 14)}rem rgba(29, 29, 33, 0.08), 0 ${8 / 16 * (16 / 14)}rem ${30 / 16 * (16 / 14)}rem rgba(29, 29, 33, 0.1)`,
+          marginTop: theme.spacing(1)
+        })
       }
     },
     MuiYearPicker: {
       styleOverrides: {
-        root: _ref26 => {
-          let {
-            theme
-          } = _ref26;
-          return {
-            alignItems: "flex-start",
-            flexDirection: "column",
-            flexWrap: "nowrap",
-            marginBottom: `-${theme.spacing(popupSpacingValue)}`,
-            marginInlineEnd: 0,
-            maxHeight: `${284 / 16 * (16 / 14)}rem`,
-            paddingLeft: 0,
-            paddingRight: 0
-          };
-        }
+        root: ({
+          theme
+        }) => ({
+          alignItems: "flex-start",
+          flexDirection: "column",
+          flexWrap: "nowrap",
+          marginBottom: `-${theme.spacing(popupSpacingValue)}`,
+          marginInlineEnd: 0,
+          maxHeight: `${284 / 16 * (16 / 14)}rem`,
+          paddingLeft: 0,
+          paddingRight: 0
+        })
       }
     },
     PrivatePickersYear: {
       styleOverrides: {
-        button: _ref27 => {
-          let {
+        button: ({
+          theme
+        }) => [yearStyles.default({
+          theme
+        }), {
+          alignItems: "center",
+          borderRadius: 0,
+          display: "flex",
+          fontSize: theme.typography.body1.fontSize,
+          justifyContent: "flex-start",
+          marginBottom: 0,
+          marginTop: 0,
+          paddingLeft: theme.spacing(7),
+          position: "relative",
+          width: "100%",
+          "&:hover": yearStyles.hover({
             theme
-          } = _ref27;
-          return [yearStyles.default({
+          }),
+          "&:not(.Mui-selected)": {
+            border: "none"
+          },
+          "&.Mui-disabled": yearStyles.disabled({
             theme
-          }), {
-            alignItems: "center",
-            borderRadius: 0,
-            display: "flex",
-            fontSize: theme.typography.body1.fontSize,
-            justifyContent: "flex-start",
-            marginBottom: 0,
-            marginTop: 0,
-            paddingLeft: theme.spacing(7),
-            position: "relative",
-            width: "100%",
-            "&:hover": yearStyles.hover({
-              theme
-            }),
-            "&:not(.Mui-selected)": {
-              border: "none"
-            },
-            "&.Mui-disabled": yearStyles.disabled({
-              theme
-            })
-          }];
-        },
+          })
+        }],
         root: () => ({
           width: "100%"
         }),
-        selected: _ref28 => {
-          let {
+        selected: ({
+          theme
+        }) => ({
+          "&, &:focus": yearStyles.selected({
             theme
-          } = _ref28;
-          return {
-            "&, &:focus": yearStyles.selected({
-              theme
-            }),
-            "&:hover": yearStyles.hoverSelected({
-              theme
-            }),
-            "&::after": yearCheckStyles.default({
-              theme
-            })
-          };
-        }
+          }),
+          "&:hover": yearStyles.hoverSelected({
+            theme
+          }),
+          "&::after": yearCheckStyles.default({
+            theme
+          })
+        })
       }
     }
   }